1、前言:
对于工作中经常用到的flex布局(弹性布局),深入学习一下
2、基础概念:
采用flex布局的元素,叫flex容器(简称),所有子元素自动成为容器成员,叫flex项目。
容器默认存在两根轴:水平的主轴、垂直的交叉轴。
项目默认沿主轴排列。
将元素的 display 属性设置为 flex(生成块级 flex 容器)或 inline-flex(生成类似 inline-block 的行内块级 flex 容器)。当一个元素设置了 Flex 布局以后,其子元素的 float、clear 和 vertical-align 等属性将失效。
3、具体学习flex布局的用法
类别 | 属性 | 描述 | 可选值 | 图例 |
容器属性 | display | 指定 HTML 元素的盒子类型 | flex/ inline-flex | |
flex-direction | 决定主轴的方向(即项目的排列方向) | row:默认值,主轴沿水平方向从左到右 column:主轴沿垂直方向从上到下 | ||
flex-wrap | 设置当弹性盒子的子元素超出父容器时是否换行 | nowrap:默认值,不换行 wrap: 换行 | ||
flex-flow | flex-direction 和 flex-wrap 两个属性的简写 | |||
justify-content | 设置弹性盒子中元素在主轴(横轴)方向上的对齐方式 | flex-start:默认值,左对齐 center:居中 space-between:两端对齐 space-around:每个项目两侧的间隔相等 | ||
align-items | 设置弹性盒子中元素在侧轴(纵轴)方向上的对齐方式 | stretch:默认值,项目将被拉伸以适合容器 center:项目位于容器的中央 | ||
align-content | 只适用多行的flex容器(子项不止一行时该属性才有效果),它的作用是当flex容器在交叉轴上有多余的空间时,将子项作为一个整体(属性值为:flex-start、flex-end、center时)进行对齐 与 justify-content 属性类似, 可以在弹性盒子的侧轴还有多余空间时调整容器内项目的对齐方式 | stretch:默认值,将项目拉伸以占据剩余空间 center:项目在容器内居中排布 space-between:多行项目均匀分布在容器中,其中第一行分布在容器的顶部,最后一行分布在容器的底部 space-around:多行项目均匀分布在容器中,并且每行的间距(包括离容器边缘的间距)都相等 | ||
项目属性 | order | 设置弹性盒子中子元素的排列顺序 | ||
align-self | 在弹性盒子的子元素上使用,用来覆盖容器的 align-items 属性 | |||
flex | 设置弹性盒子中子元素如何分配空间 |
在实际项目中,经常会遇到弹性布局