前端-flex

认识

flex布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力。flex模型不会产生浮动布局中的脱标（不占标准流）现象，布局网页更简单、更灵活。

组成

设置方式：给父元素设置display:flex，子元素可以自动挤压或拉伸
组成部分：

• 弹性容器（flex container）
• 弹性盒子（flex item）
• 主轴（main axis）：默认在水平方向
• 侧轴/交叉轴（cross axis）：默认在垂直方向
  

demo

代码：
效果

布局

描述	属性	位置
创建flex容器	display: flex;	给弹性容器设置
主轴对齐方式	justify-content	给弹性容器设置
侧轴（交叉轴）对齐方式	align-items	给弹性容器设置
某个弹性盒子侧轴（交叉轴）对齐方式	align-self	给弹性盒子设置
修改主轴方向	flex-direction	给弹性容器设置
弹性伸缩比	flex	给弹性盒子设置
弹性盒子换行	flex-wrap	给弹性容器设置
行对齐方式	align-content	给弹性容器设置

主轴对齐方式：justify-content

属性值	效果
flex-start	默认值，弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列
center	弹性盒子沿主轴居中排列
space-between	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
space-around	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-evenly	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

demo

flex-start

flex-end

center

space-between

space-around

space-evenly

侧轴（交叉轴）对齐方式：align-items

属性值	效果
stretch	默认值，弹性盒子沿着侧轴线被拉伸至铺满容器（前提是弹性盒子没有设置侧轴方向尺寸）
center	弹性盒子沿侧轴居中排列
flex-start	弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列

demo

stretch

center

flex-start

flex-end

某个弹性盒子侧轴（交叉轴）对齐方式：align-self

属性值	效果
stretch	默认值，弹性盒子沿着侧轴线被拉伸至铺满容器（前提是弹性盒子没有设置侧轴方向尺寸）
center	弹性盒子沿侧轴居中排列
flex-start	弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列

demo

flex-end

修改主轴方向：flex-direction

属性值	效果
row	默认值，水平方向，从左向右
column	垂直方向，从上向下
row-reverse	水平方向，从右向左
column-reverse	垂直方向，从下向上

demo

column

弹性伸缩比：flex

属性值	效果
<整数数字>	占用父级剩余尺寸的份数

默认情况下，主轴方向尺寸是靠内容撑开，侧轴默认拉伸。

demo

djv2{flex:1}

div2{flex:1}
div3{flex:2}

弹性盒子换行：flex-wrap

属性值	效果
nowrap	默认值，不换行
wrap	换行

demo

wrap

行对齐方式：align-content

属性值	效果
flex-start	默认值，弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列
center	弹性盒子沿主轴居中排列
space-between	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
space-around	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-evenly	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

对单行弹性盒子不生效。

demo

flex-start

flex-end

center

space-between

space-around

space-evenly