flex布局/弹性布局/伸缩盒
核心概念: 主轴、交叉轴、伸缩盒容器、伸缩盒元素。
常用规则
容器属性(设置给父元素):
flex-dircetion:row column row-reverse column-reverse (更改主轴排列方向)
flex-wrap : nowrap wrap (换行)
flex-flow(flex-direction和flex-wrap属性的缩写)
justify-content : flex-start flex-end center space-around/ evenly/ between(设置主轴对齐方式)
align-items : flex-start flex-end center stretch baseline (设置交叉轴的对齐方式)
align-content : flex-start flex-end center space-around/ evenly/between (设置多行对齐)
弹性元素属性:
order (设置弹性元素是否放大, 控制元素排列顺序,值越小越靠前,默认为0)
flex-grow( 设置弹性元素是否等比例缩小, 默认为0,1 占满剩余空间)
flex-shrink(决定项目空间不足时是否缩小,默认是1,0 代表不设置等比例缩小)
flex-basis(设置弹性元素宽度 basis 优先级比 width 高)
align-self:flex-start flex-end center(设置弹性元素自身交叉轴对齐方式)
flex(flex-grow和flex-shrink和flex-basis 的缩写 默认取值 flex:0 1 auto)
使用技巧
伸缩盒容器常用于列级布局,与浮动布局类似可以将多个块元素在一行中显示,伸缩盒更简单一些,只需要为容器盒子添加display:flex属性,这个容器盒子就变成了伸缩盒容器,其子元素伸缩盒元素就会沿着主轴来排列,默认主轴是x轴,可以通过flex-direction来改变主轴。
水平居中
- 给父元素设置display:flex;
justify-content:center; align-items:center; - 给父元素设置display:grid;
justify-content:center; align-items:center; - 给父元素设置display: flex;
给子元素设置margin:auto - 子绝父相:配合属性全部为0,margin : atuo;
- 子绝父相:top:50%; left:50%; margin-left: -width/2; margin-top:-height/2
- 给父元素设置border,给子元素设置 margin:width/2
- 给父元素设置border-box,设置padding:width/2
容器属性
弹性元素沿主轴方向排列
flex-direction:row(默认) | row-reverse | column | column-reverse 更改主轴排列方向
换行
flex-wrap: nowrap(默认) | wrap | wrap-reverse 默认不换行,如果弹性元素超出父容器的宽度,等比例压缩
flex-flow: row nowrap 默认
是flex-direction和flex-wrap属性的简写
设置主轴对齐方式
justify-content:flex-start(默认) | flex-end | center | space-between | space-around | space-evenly
交叉轴对齐方式
align-items:flex-start | flex-end | center | baseline | stretch(默认)
space-between为左右两端对齐,即左右两侧项目都紧贴容器,且项目之间间距相等。
space-around为项目之间间距为左右两侧项目到容器间距的2倍,比较特别的布局,日常使用不太多。
space-evenly为项目之间间距与项目与容器间距相等,相当于除去项目宽度,平均分配了剩余宽度作为项目左右margin。
stretch平铺 ,默认交叉轴属性,前提弹性元素高度不设置/auto。
基线对齐 baseline 文字对齐
设置多行对齐方式
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默认)
space-around与justify-content保持一致,即项目之间间距为上下两端项目与容器间距两倍。
space-evenly同理,项目之间间距与项目到容器之间间距相等,space-between为上下两侧项目紧贴容器。
弹性元素属性
控制元素排列顺序
order: 默认0, 值越小越靠前
决定项目在有剩余空间的情况下是否放大
flex-grow: 容器在有剩余空间的情况下默认是不会被占据
决定项目在空间不足时是否缩小
flex-shrink 默认是1 等比例压缩
flex-basis 默认auto,设置弹性元素宽度 basis优先级比width高
占满剩余空间
flex: 默认0 1 auto,flex属性是flex-grow,flex-shrink与flex-basis三个属性的简写
交叉轴对齐方式
align-self: auto(默认) | flex-start | flex-end | center | baseline | stretch,表示继承父容器的align-items属性。如果没父元素,则默认stretch。