Flexbox布局，了解一下

╰+攻爆jí腚メ 2021-09-15 12:56 347阅读 0赞

# 四种布局模式 #

*  块布局：呈现文档的布局模式
 *  行内布局：呈现文本的布局模式
 *  表格布局：用格子呈现2D数据的布局模式
 *  布局定位：能够直接定位元素的布局模式，定位元素基本与其他元素没有任何关系

.box{ display: flex; }

# 基本概念 #

> [http://www.runoob.com/w3cnote/flex-grammar.html][http_www.runoob.com_w3cnote_flex-grammar.html]

![这里写图片描述][70]

# flex-direction #

主轴的方向，也就是横向排版  
\- ：row 从左向右  
\- ：row-reverse 从右向左  
\- ：column 从上往下  
\- ：column-reverse从下往上

# flex-wrap #

控制换行

*  nowrap
 *  wrap
 *  wrapreverse

# flex-flow #

是上面两个属性的综合

# justify-content #

就是类似于横向的文字排版，这个是在主轴上

*  flex-start 左对齐
 *  flex-end 右对齐
 *  center 居中
 *  space-between 两端对齐
 *  space-around 每两个元素之间的间距相等，是元素内边距的两倍

# align-items #

交叉轴 感觉像y轴 也就是竖着怎么排列吧

*  flex-start 最顶端
 *  flex-end 最底端
 *  center 中间，这个可以做文本居中，应该比较好
 *  baseline 以第一个文本的基线（就是文字的底部）为准线
 *  stretch 默认 占整个高度

# align-content #

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

*  flex-start
 *  flex-end
 *  center
 *  space-between
 *  space-around
 *  stretch;

# 项目的属性 #

.item { order: <integer>; //按顺序 从小到大 默认为 0 flex-grow: <number>; /* default 0 放大比例 */ flex-shrink: <number>; /* default 1 缩小比例 */ flex-basis: <length> | auto; /* default auto 在主轴上的初始化大小*/ flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] // 简写 align-self: auto | flex-start | flex-end | center | baseline | stretch; }

align-self  
\- align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。  
\- 该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

[http_www.runoob.com_w3cnote_flex-grammar.html]: http://www.runoob.com/w3cnote/flex-grammar.html
[70]: /images/20210813/784e61d28806477f980b8a9fcda8c0e4.png