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小时内删除。