flex布局属性有哪些 知识归纳-弹性布局-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布局的内容请站内查找。