内容简介：Flex（Flexible Box）布局 称为 "弹性布局"，可以为网页的布局提供最大的灵活性，取代了往常的 浮动（float） 布局，并且任何一个容器都可以设置 Flex 布局。注：设置 Flex 布局后，子元素的 Float 布局将失效3.Flex-flow（属性是 flex-direction 和 flex-wrap 的简写形式）
Flex（Flexible Box）布局 称为 "弹性布局"，可以为网页的布局提供最大的灵活性，取代了往常的 浮动（float） 布局，并且任何一个容器都可以设置 Flex 布局。
注：设置 Flex 布局后，子元素的 Float 布局将失效
Flex中的四大概念
容器：如果给一个标签添加 display:flex; ，那么这个标签就是一个容器
项目：在容器中的直接子元素叫项目（一定是 直接 子元素）
主轴：项目的默认 排序 方向就是主轴（默认横向排列，一个容器可以有多根主轴）
交叉轴：和主轴垂直的那个轴，就是交叉轴
容器的属性
Flex-direction | Flex-wrap | Flex-flow | justify-content | align-items | align-content
- Flex-direction（属性决定主轴的方向）
flex-direction：row | row-reverse | column | column-reverse;
- row（默认值）：主轴为水平方向，起点在左端
- row-reverse：主轴为水平方向，起点在右端
- column：主轴为垂直方向，起点在上端
- column-reverse：主轴为垂直方向，起点在下端
- Flex-wrap(属性决定项目排不下时如何换行)
flex-wrap：nowrap | wrap | wrap-reverse;
- norwrap（默认）：不换行
- wrap：换行，第一行在上方
- wrap-reverse：换行，第一行在下方
3.Flex-flow（属性是 flex-direction 和 flex-wrap 的简写形式）
-
flex-flow: flex-direction || flex-wrap;
4.justify-content(处理项目外的 富余空间)
-
justify-content：flex-start | flex-end | center | space-between | space-around;
- flex-start；（默认值），项目左对齐
- flex-end：项目右对齐
- center： 项目居中
- space-between：项目两端对齐，项目之间的间隔都相等
- space-around：每个项目两侧的间隔相等
5.align-items(属性决定项目在交叉轴上如何对齐)
-
align-items：stretch | flex-start | flex-end | center | baseline;
- stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
- flex-start：交叉轴的起点对齐
- flex-end：交叉轴的终点对齐
- center：交叉轴的中点对齐
- baseline：项目的第一行文字的基线对齐
6.align-content（属性决定了多根主轴的对齐方式）
-
align-content：stretch | flex-start | flex-end | center | space-between | space-around;
- stretch（默认值）：轴线占满整个交叉轴
- flex-start：与交叉轴的起点对齐
- flex-end：与交叉轴的终点对齐
- center：与交叉轴的中点对齐
- space-between：与交叉轴两端对齐，轴线之间的间隔平均分
- space-around：每根轴线两侧的间隔都相等
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
- Flexbox 布局完全指南(图解 Flexbox 布局详细教程)
- Flex 布局教程
- CSS网格布局（Grid）教程
- CSS Grid 网格布局教程
- 小程序Flex 布局教程：语法篇
- 写给自己看的display: flex布局教程
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
