flex布局
# 7.flex布局
工作三个月了，记录一下最近常用的flex布局
摘录来源：
看完这篇，对flex布局还不熟悉，那就来找我（flex布局最全详解）-腾讯云开发者社区-腾讯云 (opens new window)
Flex 布局教程：语法篇 - 阮一峰的网络日志 (opens new window)
传统的页面布局用到的盒子模型是margin + border + padding + content
若要实现垂直居中、子元素规律排列会有些困难，而只需要学习flex布局就能够轻松实现这些布局
Flex 是 Flexible Box 的缩写，意为"弹性布局"
在 flex 容器 (opens new window)中默认存在两条轴，水平主轴(main axis) 和垂直的交叉轴(cross axis)
在容器中子元素自动成为容器成员，被称之为 flex item，简称"项目"。
定义一个容器为flex布局
.container {
display: flex;
}
2
3
*设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。*也就是盒子模型的属性
- flex-direction属性决定主轴的方向（即项目的排列方向）。
- flex-wrap属性决定如果一条轴线排不下，如何换行。
- flex-flow属性，是flex-direction属性和flex-wrap属性的简写形式
- justify-content属性定义了项目在主轴上的对齐方式。
- align-items属性定义项目在交叉轴上如何对齐。
- align-content属性定义了多根轴线的对齐方式。
# 1、flex-direction属性
取值：row(默认) | row-reverse | column | column-reverse
用于控制项目排列方向与顺序。
# 2、flex-wrap属性
取值：nowrap(默认) | wrap | wrap-reverse
用于控制项目是否换行，nowrap表示不换行；
# 3、flex-flow
flex-flow属性是flex-deriction与flex-wrap属性的简写集合，默认属性为row nowrap，即横向排列，且不换行，如果需要控制项目排列与换行，推荐使用此属性，而非单独写两个。
# 4、justify-content属性
取值：flex-start(默认) | flex-end | center | space-between | space-around | space-evenly;
justify-content属性控制了项目在主轴上的对齐方式。
# 5、align-items属性
取值：flex-start | flex-end | center | baseline | stretch(默认)
flex-start会让项目在纵轴紧贴容器顶部，flex-end与之相反：
# 6、align-content
取值：flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默认);
用于控制多行项目的对齐方式，如果项目只有一行则不会起作用；默认stretch，即在项目没设置高度，或高度为auto情况下让项目填满整个容器，与align-items类似。
文字写于：广东
