文章目录
一、传统的盒子模型(margin、border、padding、content)
当我们并列书写多个div标签,它们会纵向向下排位
如果我们想将多个div并列成一排,就得借助{float: left/right}
属性,别看只一行,要考虑的很多,比如清除浮动、换行、溢出、高度塌陷等的一系列问题,这便是传统的盒模型做法,不方便。
二、FlexBox弹性盒子模型
flex布局通过为修改父div的display属性,让父元素成为一个flex容器,在容器里面就可以随便操作子元素(项目)的排列,也是只需一行{display:flex}
,并且无后顾之忧。
【注意】
设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
【注意】
IE 9 及更早版本不支持 flex 属性.
【注意】
IE10 通过 -ms-flex 属性来支持。 IE11 及更新版本完全支持 flex 属性 (不需要 -ms- 前缀)。
1.容器的属性(父元素的属性)
1.1flex-direction属性
取值
:row(默认横向排列
1-2-3) | column(纵向排列
) | row-reverse(反横向
3-2-1)| column-reverse(反纵向
)
1.2.flex-wrap属性
取值
:nowrap(默认不换行
) | wrap(换行
) | wrap-reverse(反换
)
wrap表示换行,即项目不会等分容器宽度,而是根据自身宽度进行排列,如果超出
父容器宽度则自然换行
。
wrap-reverse同样表示换行,需要注意的是第一排会紧贴容器底部,由下往上排,效果与wrap相反
1.3.flex-flow属性
lex-flow属性是flex-deriction
与flex-wrap
的属性集合
,默认属性为row nowrap
,即横向排列,且不换行,如果需要控制项目排列与换行,推荐使用此属性,而非单独写两个。
1.4.justify-content属性(处理横轴对齐方式)
取值
:flex-start(默认) | flex-end | center | space-between | space-around | space-evenly;
用于控制项目在横轴
的对齐方式,默认flex-start即左对齐,center 为居中,对应的flex-end为右对齐。记几个常用的好了。不常用的查文档就好了。
1.5.align-items属性(处理纵轴对齐方式)
取值
:flex-start | flex-end | center | baseline | stretch(默认)
用于控制项目在纵轴
排列方式,默认stretch即如果项目没设置高度,或高度为auto,占满整个容器。记几个常用的好了。
【注意】
:常理来说justify-content与align-items默认分别处理项目横轴,纵轴的对齐方式,但如果我们修改了flex-direction为column,它们处理的轴向会交换,也就是justify-content处理纵轴,align-items处理横轴。
1.6.垂直水平居中(最重要)
最后要记住的便是这垂直水平居中,仅一句。
{justify-content:center;align-items:center}
2.项目的属性(子元素的属性)
2.1.flex-grow
取值
:默认0
,分配的是剩余的父亲的长度,即下图所示,父亲总长度-项目原定长度=剩余长度,flex-grow的数值是取剩余长度的份额
[注意]
,即便项目设置了固定宽度,也会放大。