弹性盒模型的作用:就是控制子元素的布局
形成弹性盒:在父元素上写display:flex
特点:
- 当父元素变成弹性盒子之后,子元素默认横向显示 (沿着主轴排列,默认主轴x轴,另外一个叫做侧轴)
- 当父元素变成弹性盒子之后。子元素都能直接设置宽高
- margin:auto是生效的
- 如果子元素总宽度大于父元素,那么是不会超出父盒子,也不会自动换行,而是会被挤压
- 可以左右布局,圣杯布局
设置主轴方向:
flex-direction: row | row-reverse | column | column-reverse;
row:横向、x轴 (常用)
column:纵向、y轴(常用)
设置子元素在主轴的对齐方式:
- justify-content: flex-start | flex-end | center | space-between | space-around;
- flex-start:主轴的开始位置对齐,没有间距
- flex-end:主轴的结束位置对齐,没有间距
- center:居中, 主轴的中间位置对齐,没有间距
- space-between:主轴上面两端对齐,元素与元素之间的距离自动分配(常用)
- space-around:自动分配距离、左右间距都一样。(常用)
- 主轴上面的间距环绕,元素与元素之间的距离是靠边元素与父元素之间的2倍
- space-evenly:自动分配剩余空间,所有的距离都一样
设置子元素在侧轴(交叉轴)的对齐方式:
- align-items: flex-start | flex-end | center | baseline | stretch(默认值);
- flex-start:侧轴的开始位置
- flex-end:侧轴的结束位置
- center:侧轴的中间位置
- baseline:和flex-start等效
- stretch拉伸,要想让拉伸起作用,前提是子元素不能定宽度或者高度。
设置子元素是否换行:
-
- flex-wrap: nowrap | wrap | wrap-reverse;
- nowrap:不换行
- wrap:换行
- wrap-reverse:反向换行
换行之后,行间距自动分配;行间距比较大
多行对齐方式(对于单行子元素,该属性不起作用。):
-
- align-content: flex-start | flex-end | center | space-between | space-around | stretch;
- align-content在侧轴上执行样式的时候,会把默认的间距给合并。对于单行子元素,该属性不起作用
- flex-start:侧轴开始位置对其,没有行间距
- flex-end:侧轴结束位置对其,没有行间距
- center:侧轴中间位置对其,没有行间距
- space-between:2端对齐,中间自动分配
- space-around:自动分配间距
设置在子元素上的属性:
- align-self:控制自己在侧轴的对齐方式
- auto:默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"
- stretch=======元素被拉伸以适应容器。(如果没有宽度、高度)
- center========侧轴的居中位置
- flex-start======侧轴的开始位置
- flex-end=======侧轴的结束位置
- baseline==========侧轴的基线位置,实现效果与开始位置一样
- order:排序,控制子元素的排列顺序,数字越大越往后排,默认0,支持负数
- flex:设置子元素如何分配空间
- flex:1把剩余空间全部分配给当前元素
- 如果每一个子元素都有flex:1,那就是平均分配
- 如果有3个子元素:分别设置flex:1、flex:2、flex:3。那么就是把整个盒子分成了6份,第一个占1份,第二个占2份,第三个占3份。
- flex-shrink:======元素是否挤压,一般用于制作移动端的横向滚动。
- 0=====不挤压
- 1=====挤压(默认值)