今天打开我的csdn,竟然涨了7个粉丝,哈哈。为了我新涨的粉丝们,决定今晚加更一篇文章~
目录
一、flex弹性布局与传统布局的区别:
二、flex布局介绍
三、父元素常见属性
四、子元素常见属性
五、flex圣杯布局
六、flex布局应用
一、flex弹性布局与传统布局的区别:
二、flex布局介绍
原理:通过给父盒子添加display:flex属性,来控制子盒子的位置和排列方式。
特点(待补充):
1、flex布局相较于传统布局(浮动、定位)更简便,但兼容性较差;
2、父元素设为flex布局后,子元素的float、clear、vertical-align属性失效;
3、应用于任何元素:块元素、行元素、行内块元素;
4、display:声明flex属性值 flex,对应块元素,即容器转化为块元素 inline-flex,对应行内元素,即容器转化为行内元素;
5、子项目中行元素可直接设置宽高,块元素宽度不继承,行内块元素没有间隔;
6、没有外边距合并问题;
7、能让页面宽度自适应,高度与字体大小自适应需要配合rem+媒体查询。
三、父元素常见属性
1、flex-direction 决定主轴 x轴 y轴
2、justify-content 设置主轴上的子元素排列方式
3、align-items 设置侧轴上的子元素排列方式 (单行)
注意:只在子元素单行排列时起作用,与flex-wrap: nowrap;共同使用。
4、align-content 设置侧轴上的子元素排列方式 (多行)
注意:只在子元素多行排列时起作用,与flex-wrap: wrap;共同使用。
5、flex-wrap 设置子元素是否换行
注意:默认不换行,如果子元素宽度和超过父元素宽度,子元素的宽度会被缩小,width属性失效
6、flex-flow 是flex-direction和flex-wrap属性的复合属性
语法:flex-flow: flex-direction属性值 flex-wrap属性值
四、子元素常见属性
1、flex 定义子项目分配剩余空间,属性值表示占有的份数
语法:flex: <number>; number值可为数字或者百分比
注意:剩余空间指除指定宽高的元素所占有的其他所有空间,被分配的子元素宽高将自动撑满剩余空间。
2、align-self 控制子项本身在侧轴上的排列方式
3、order 定义项目的排列顺序
语法:order:<number>;默认值为0,数值越小,排列越靠前
五、flex圣杯布局
html:
<section><p></p><p></p><p></p></section>
css:
/* 子元素属性 */section {display: flex;width: 60%;height: 100px;background-color: blue;margin: 50px auto;}p:first-child {width: 100px;height: 100px;background-color: green;}p:nth-child(2) {/* 宽度与高度不用设置,元素大小为剩余空间大小 */flex: 1;background-color: pink;}p:last-child {width: 100px;height: 100px;background-color: rgb(143, 25, 31);}
六、flex布局应用
引言:这是我在做页面仿写时发现的关于flex布局的一个应用,在这里记录一下。
问题:在多行下子元素平均分配父元素空间,并子元素存在间隙的情况,如下:
首先了解:flex容器每一行的宽度 = 每个子容器的宽度 + 子元素对应轴的margin值
解决方法:
1、将多行子元素用一层盒子包裹起来,形成父容器单行排列子盒子,即单行变多行。flex值为数字,margin不会让盒子挤走 ;
2、间隙用一个元素边框代替 高度为0 或者宽度为0,定位到需要的位置;
3、width:百分比 不会发生挤走的情况 单行或者多行都能使用 中间间距用自身padding值取代。