flex布局

作者: Mr老朝 | 来源:发表于2023-11-16 15:12 被阅读0次

flex布局
初见FLEX
Flex 布局教程
css flex布局详解
Flex
flex布局学习笔记
6Flex 布局
css flex
Flex布局（语法篇）
Day02_flex布局

flexbox 的两根轴线:

当使用 flex 布局时，首先想到的是两根轴线 — 主轴和交叉轴

主轴由 flex-direction 定义,另一根轴垂直于它

我们使用 flexbox 的所有属性都跟这两根轴线有关, 所以有必要在一开始首先理解它

父元素属性

1、display:flex

设置flex容器

display:flex
// flex  将对象作为弹性伸缩盒显示
// inline-flex  将对象作为内联块级弹性伸缩盒显示

2、flex-direction

主轴方向

flex-direction:column 
// row 水平方向排列，从左到右(默认值)
// column 垂直方向排列，从上到下
// row-reverse 水平方向排列，从右到左，和row相反
// column-reverse 垂直方向排列，从下到上

默认水平方向

column垂直方向

3、flex-wrap

是否换行

flex-wrap: wrap
// nowrap  flex的元素被摆放到到一行，这可能导致溢出 flex 容器。(默认值)
// wrap  flex元素被打断到多个行中。
// wrap-reverse     和 wrap 的行为一样，但是 cross-start 和 cross-end 互换。

4、align-items

元素在交叉轴方向对齐

align-items: center
// stretch  //  弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度
// flex-start  // 元素向侧轴起点对齐。
// flex-end  // 元素向侧轴终点对齐。
// center  //  元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同。

5、justify-content

元素在主轴方向上对齐

justify-content: center
// center  // 居中排列
// space-around  // 均匀排列每个元素每个元素周围分配相同的空间
// space-between  // 均匀排列每个元素首个元素放置于起点，末尾元素放置于终点
// stretch   // 弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。
// flex-start  // 从行首起始位置开始排列
// flex-end  // 从行尾位置开始排列
// space-evenly  // 均匀排列每个元素每个元素之间的间隔相等

6、flex-flow

flex-flow 是 flex-direction 和 flex-wrap 组合的简写属性

第一个指定的值为 flex-direction ，第二个指定的值为 flex-wrap

flex-flow: row wrap

7、align-content

浏览器如何沿着弹性盒子布局的纵轴和网格布局的主轴在内容项之间和周围分配空间

该属性对单行弹性盒子模型无效。（即：带有 flex-wrap: nowrap）

align-content 和 align-items 实现效果相同，区别在于前者对flex容器内的多行flex元素生效，后者单行或者多行都会生效

align-content: stretch | center | flex-start | flex-end
stretch  //  弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度
flex-start  // 元素向侧轴起点对齐
flex-end  // 元素向侧轴终点对齐
center  //  元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同

子元素属性

1、flex-gow

定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

flex-grow: number | 0
// 0 为0则表示剩余空间不重新分配；(默认值)
// number 为正整数则按比例分配多余空间

2、flex-shrink

定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

flex-shrink: 1 | 0
// 1 空间不足时将缩小
// 0 空间不足时不缩小

3、flex-basis

设置长度大小，默认值为auto,即项目本身的大小

flex-basis: number | auto
// number  一个长度单位或者一个百分比，规定灵活项目的初始长度
// auto  长度等于灵活项目的长度。如果该项目未指定长度，则长度将根据内容决定(默认值)

4、flex

flex属性是 flex-grow、flex-shrink、flex-basis的简写，默认为 0，1，auto

flex: 1;
// flex: 0, 1, auto(默认值)

5、align-self

子元素的对齐方式

允许单个项目有与其他项目不一样的对齐方式

如果想设置某一个item有不一样的对齐方式的时候，可以用它

center  //  元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同
align-self: center
stretch  //  单个弹性元素被在侧轴方向被拉伸到与容器相同的长度
flex-start  // 元素向侧轴起点对齐
flex-end  // 元素向侧轴终点对齐