css总结13(弹性盒子和flex布局)

目录

弹性盒子模型参考图

flex属性


弹性盒子模型参考图

css总结13(弹性盒子和flex布局)_第1张图片

 flex属性

### 前言:
(1) 通过给普通块标签设置display:flex属性,使其成为一个弹性盒子;
(2) 在弹性盒子模型的基础上,结合相关的flex属性从而来布局弹性盒子的元素,可以成为该布局方式为flex布局;

### flex样式属性分类
有些用于弹性盒子这个父容器上,而有些用于其子元素上,所以可以进行划分总结
## (1) 弹性盒子flex样式属性
flex-direction、justify-content、align-items、flex-wrap、(flex-flow: direction wrap)、align-content
## (2) 子元素flex样式属性
align-slef、flex-grow、flex-shrink、flex-basis、(flex: grow shrink basis)、order

### flex样式属性
## (1) flex-direction
设置主轴的方向
row:默认值,行方向的轴为主轴,此时列方向的轴就是次轴,此时子元素开始点为左上点;
column:列方向的轴为主轴,此时行方向的轴为次轴,此时子元素开始点为左上点;
row-reverse:反向行方向为主轴,此时子元素会在行方向上反向排列,此时子元素开始点也转变为右上点;
column-reverse:反向列方向为主轴,此时子元素会在列方向上反向排列,此时子元素开始点也转变为左下点;
## (2) justify-content
设置元素在主轴方向上的对齐方式
flex-start/start:开始点对齐
flex-end/end:末尾点对齐
center:居中对齐
space-between:首末元素两点贴靠,中间元素均匀分布
space-around:首末不贴靠,首末元素边距相等,元素间隙相等
space-evenly:首末不贴靠,平均划分元素的所有间隙
left:左对齐(仅当行方向为主轴时生效)
right:右对齐(仅当行方向为主轴时生效)
## (3)align-items
设置元素在次轴方向上的对齐方式;
flex-start/start:开始点对齐
flex-end/end:末尾点对齐
center:居中对齐
## (4) align-self
注意,该样式属性用于弹性盒子的子元素,覆盖弹性盒子的align-items属性
## (5) flex-wrap
用于设置弹性盒子内子元素是否换行
nowrap:默认值,不换行
wrap:换行,但行之间有断行
wrap-reverse:换行且从当前次轴末点开始排列
## (6) flex-flow: direction wrap;
用于同时设置flex-direction和flex-wrap属性
## (7) align-content
用于和flex-wrap:wrap结合使用,改变了默认断行行为,并且可以指定其在次轴方向上的对齐方式。
flex-start/start:开始点对齐
flex-end/end:末尾点对齐
center:居中对齐
space-between:首末元素两点贴靠,中间元素均匀分布
space-around:首末不贴靠,首末元素边距相等,元素间隙相等
space-evenly:首末不贴靠,平均划分元素的所有间隙
## (8) flex-grow
注意该样式属性用于子元素,用于设置弹性盒子内子元素伸展比例的数值;
如果使用该属性,应该规划好每个部分所占的尺寸份数,如果是横向布局,则考虑宽度占份,反之考虑高度占份;
比如:横向布局,有左中右三部分,将整个容器宽度分为12列,左占2列,中占8列,右占2列,那么这三部分子元素的flex-grow分别就为2,8,2;
## (9) flex-shrink
注意,该样式属性用于子元素,用于设置弹性内元素收缩比例的数值;
弹性盒子中默认每个子元素的flex-shrink都为1,如果子元素的总尺寸大于弹性盒子,那么就会根据flex-shrink这个值来对每个元素尺寸进行占比衰减
## (10) flex-basis
用于设置弹性盒子内元素的初始尺寸,横向布局则为宽度,反之则为高度;
auto:自适应尺寸
具体数值:设置具体尺寸
## (11) flex: grow shrink basis;
用于设置Flex容器内元素的伸缩性的简写形式
## (12) order
用于设置对弹性盒子内元素排列顺序的数值

 

你可能感兴趣的:(Css,css,css3,前端)