CSS布局篇——flex布局
1.flex布局
布局的传统解决⽅案，基于盒模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局⾮常不⽅便，⽐如，垂直居中就不容易实现。
2009年，W3C 提出了⼀种新的⽅案----Flex 布局，可以简便、完整、响应式地实现各种页⾯布局。⽬前，它已经得到了所有浏览器的⽀持，这意味着，现在就能很安全地使⽤这项功能。
Flex 是 Flexible Box 的缩写，意为"弹性布局"，⽤来为盒状模型提供最⼤的灵活性。
任何⼀个容器都可以指定为 Flex 布局。
2.flex布局属性
3.flex弹性盒模型
采⽤ Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有⼦元素⾃动成为容器
成员，称为 Flex 项⽬（flex item），简称"项⽬"。
对于某个元素只要声明了display: flex;，那么这个元素就成为了弹性容器，具有flex弹性布局的特性。
1. 每个弹性容器都有两根轴：主轴和交叉轴，两轴之间成90度关系。注意：⽔平的不⼀定就是主轴。
2. 每根轴都有起点和终点，这对于元素的对齐⾮常重要。
3. 弹性容器中的所有⼦元素称为<；弹性元素>，弹性元素永远沿主轴排列。
4. 弹性元素也可以通过display:flex设置为另⼀个弹性容器，形成嵌套关系。因此⼀个元素既可以是弹性容器也可以是弹性元素。
弹性容器的两根轴⾮常重要，所有属性都是作⽤于轴的。
3.1.主轴
flex布局是⼀种⼀维布局模型，⼀次只能处理⼀个维度（⼀⾏或者⼀列）上的元素布局。
也就是说，flex布局⼤部分的属性都是作⽤于主轴的，在交叉轴上很多时候只能被动地变化。
我们可以在弹性容器上通过flex-direction修改主轴的⽅向。如果主轴⽅向修改了，那么：
1. 交叉轴就会相应地旋转90度。
2. 弹性元素的排列⽅式也会发⽣改变，因为弹性元素永远沿主轴排列。
flex-direction属性
取值：row(默认) | row-reverse | column | column-reverse
⽤于控制项⽬排列⽅向与顺序，默认row，即横向排列，项⽬排列顺序为正序1-2-3；row-reverse同为横向排列，但项⽬顺序为倒序3-2-
1。
column 与row相反，为纵向排列，项⽬顺序为正序1-2-3，column-reverse同为纵向排列，项⽬顺序为倒序3-2-1。
3.2.沿主轴的排列处理
弹性元素永远沿主轴排列，那么如果主轴排不下，该如何处理？
通过设置flex-wrap属性可使得主轴上的元素不换⾏、换⾏、反向换⾏。
取值：nowrap(默认) | wrap | wrap-reverse
⽤于控制项⽬是否换⾏，nowrap表⽰不换⾏；
举个例⼦：⽐如容器宽度为300px，容器中有6个宽度为60px的元素，nowrap情况下，项⽬会强⾏等分容器宽度从⽽不换⾏，那么项⽬实际宽度也就只有50px了，⽽⾮我们⾃⼰设置的60px。
wrap表⽰换⾏，即项⽬不会等分容器宽度，⽽是根据⾃⾝宽度进⾏排列，如果超出⽗容器宽度则⾃然换⾏。
wrap-reverse同样表⽰换⾏，需要注意的是第⼀排会紧贴容器底部，⽽不是我们想象的项⽬6紧贴容器顶部，效果与wrap相反。
3.3.flex-flow属性
flex-flow属性是flex-deriction与flex-wrap属性的简写集合，默认属性为row nowrap，即横向排列，且不换⾏，如果需要控制项⽬排列与换⾏，推荐使⽤此属性，⽽⾮单独写两个。
flex布局对齐方式3.4.justify-content属性
取值：flex-start(默认) | flex-end | center | space-between | space-around | space-evenly;
⽤于控制项⽬在主轴的对齐⽅式，默认flex-start即左对齐，center 为居中，对应的flex-end为右对齐。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。