flex布局属性有哪些 知识归纳-弹性布局-flex

文章目录：

1. flex 布局
2. 知识归纳-弹性布局-flex

一、flex 布局

一、Flex 布局是什么？

Flex 是 Flexible Box 的缩写 ，意为“弹性布局” 用来为盒状模型提供最大的灵活性

任何一个容器都可以指定为 Flex 布局   （行内元素也可以）

二、基本概念

采用 Flex 布局的元素，称为Flex 容器 它的所有子元素自动成为容器成员，称为Flex项目

三、容器的属性 （重点记忆）

以下6个属性设置在容器上。

3.1 flex-direction 属性决定主轴的方向（即项目的排列方向）

flex-direction:row | row-reverse | colume | colume-reverse;

1）row：横向从左到右排列（左对齐），默认的排列方式。

2）row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。

3）column：纵向排列

4）column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

flex-wrap 定义如果一条轴线排不下，如何换行

flex-wrap: nowrap  |  wrap  |  wrap-reverse

1) nowrap (默认)不换行 

2）wrap 换行，第一行排列在上方 

3）wrap-reverse: 换行，第一行在下方

3.2 .flex-flow 是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap  

justify-content 定义了项目在主轴上的对齐方式

justify-content : flex-start | flex-end | center | space0-between | space-around

align-items 定义项目在交叉轴上如何对齐

align-item: flex-start  |  flex-end    |  center  |  baseline |  stretch 

align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

二、知识归纳-弹性布局-flex

main start 主轴起点 main axis 主轴 main end 主轴终点

cross start 交叉轴起点 cross axis 交叉轴 cross end 交叉轴终点

     [交叉轴也称 侧轴]

     [项目默认沿主轴排列]

设定主轴方向：     [指定项目的排列方向]

flex-direction: row [默认值] | row-reverse | column | column-reverse

     [row 默认值 主轴水平向右]

     [row-reverse 主轴水平向左]

     [column 主轴垂直向下]

     [column-reverse 主轴垂直向上]

指定项目的换行方式：

flex-wrap: nowrap [默认值] | wrap | wrap-reverse

     [nowrap 默认值 不换行]

     [wrap 换行 从主轴上往主轴下排列]

     [wrap-reverse 换行 从主轴下往主轴上排列]

主轴方向与换行的复合写法：

flex-flow: row nowrap [默认值]

指定项目在主轴上的对齐方式

justify-content: flex-start [默认值] | flex-end | center | space-between | space-around | space-evenly

     [flex-start 默认值 起点对齐]

     [flex-end 终点对齐]

     [center 居中]

     [flex-start 默认值 起点对齐]

     [space-between 两端对齐]

     [space-around 项目两侧间距相等排开]

     [space-evenly项目与项目间、项目与边框的间距相等，对标 space-around ]

指定主轴的对齐方式

align-content: flex-start [默认值] | flex-end | center | space-between | space-around | space-evenly

指定项目在侧轴上的对齐方式

align-items:flex-start [默认值] | flex-end | center | baseline

     baseline 对齐项目的 第一行文字的 基线

指定项目的排列顺序： order: val;

指定项目对剩余空间分配的占比: flex-grow:0 [默认值];

     [若所有项目均为1，则项目将平分剩余空间]

指定项目 在分配多余空间前 占据的主轴空间: flex-basis:auto [默认值];

     [类 width 但优先级比 width 高]

指定项目的缩小比例： flex-shrink:1 [默认值]

     [若所有项目均为1，则空间不足时，项目均会等比缩小]

缩放属性、占据主轴空间属性的复合写法： flex: flex-grow flex-shrink flex-basis

     [快捷值1：auto == (1 1 auto)]

         { 项目占据(或均分)本行剩余的主轴所有空间     (因为flex-basis属性优先级高于width，所以不会出现元素溢出问题)}

     [快捷值2：none == (0 0 auto)]

         { 空间不足时项目不会缩小，空间剩余时项目不会放大}

         { 当项目没指定高度 height 时， align-content:stretch [默认值] 会失效，因为侧轴空间的缩放也被禁止}

指定单个项目在侧轴上的对齐方式： align-self:flex-start [默认值] | flex-end | center | baseline

     [优先级高于align-content]

以上是问答百科为你整理的2条关于flex布局的问题，希望对你有帮助！更多相关flex布局的内容请站内查找。