首先display的几种显示方式
-
display:block; 转为块级元素
-
display:inline-block 转为行内块元素
-
display:none; 隐藏元素,不占位置。
-
display:inline; 将元素转为行内元素。
-
display :flex; 是一种布局方式。让这个父盒子具有弹性布局的性质,盒子就有了侧周和主轴。默认主轴是水平方向,侧轴是垂直方向。
-
默认咋弹性盒子中的元素是不换行的。如果子元素的宽度的总和大于了父盒子的宽度,那么弹性布局救护发挥作用。 他会自动压缩子元素,让子元素的和可以布局到父元素中,这样就实现了适配。
那下面总结了flex布局的详细参数:
1—justify-content 控制主轴方向的对齐方式
justify-content: center; 主轴方向居中对齐
justify-content: flex-start; 从主轴开始的方向堆叠
justify-content: flex-end; 从主轴结束的地方堆叠
justify-content: space-between; 子元素之间用空白分割,子元素和父元素边界没有空白
justify-content: space-around; 让空白在子元素之间,空白宽度两边一致,其他地方一致
justify-content: space-evenly; 将剩余空间用空白分割,空白的地方是等宽的。
2—调整主轴的方向 flex-direction
flex-direction: column 调整主轴方向为垂直方向
flex-direction:row; 默认的主轴方向为行。
flex-direction:row-reverse; 调整主轴的方向从右到左开始。
flex-direction: column-reverse; 调整主轴的方向从下到上。
3— 控制单行侧轴的方向 align-items
align-items: flex-start; 从侧周开始地方对齐
align-items:center; 从侧周的中间对齐
align-items:flex-end; 从侧周结束的地方对齐
4— 控制弹性盒子中的元素是否换行 (默认不换行)
flex-wrap: wrap; //子元素总和放不下一行的时候,自动换行
flex-wrap:nowrap; //默认不换行 自动压缩子元素的宽度
5—有多行的时候,用 align-items 调整侧轴的对齐方式是不管用的,所以用align-content
align-content:flex-start; 从侧轴开始的方向堆叠
align-content:flex-end; 从侧轴结束的方向堆叠
align-content:center; 从侧轴的中间居中堆叠
align-content:space-around; 让侧轴方向的盒子的剩余空间用空白分割。
align-content:stretch; 让侧轴方向的盒子拉伸铺满父元素高度(子元素没设高度的情况下有用。设置高度的情况下,子盒子的高度不被拉伸)
align-content:space-between; 让侧轴方向的盒子间用空白分割,两边贴父元素边。
align-content:space-evenly; 让侧轴方向的盒子的剩余空间用空白均分。空白占比一致。
6---设置子元素占父元素的比例,给子元素设置的。
flex:1;
后面的数值表示,所加属性的这个子元素占父元素是剩余的几份,
已经有宽度的子元素提前分配不包在总份中。
7--- order 设置子元素的排列前后顺序
如果想让最后一个子元素最开始显示,可以添加这个 属性,数字越小,排在越前面。
8--- align-self 如果某子元素想重新调整自己侧轴的对齐方式,
就可以用这个,属性值同侧轴调整对齐方式属性值一样。