flex怎么用?常用的属性有哪些?

Posted babilong

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了flex怎么用?常用的属性有哪些?相关的知识,希望对你有一定的参考价值。

flex 布局

Flex  :Flexible box 弹性布局,用来为盒装模型提供最大的灵活性。任何的容器都可以指定为Flex布局

.box{
diaplay:flex;
]

行内元素可以使用flex布局

.box{
display:inline-flex
}

 

传统的布局时基于盒装模型 https://www.cnblogs.com/babilong/p/13355014.html,依赖于diaplay属性,float属性,position属性。对于一些特殊的布局就比较麻烦。

 

 

Flex布局图

技术图片

图示解读:每一个Flex布局都有一个主轴(main axis)交叉轴(cross axis)又叫纵轴。

     主轴的起点main startmain end。

  交叉轴起点cross startcross end

  flex item是布局中的每一项即项目。

 

Flex的基本属性

1.flex-direction 属性决定了项目的排列方式

flex-direction :row | row-reverse | column |column-reserve


row(默认):项目横向排列,方向由左向右

row-revserse:项目横向排列,方向由右向左

column:项目纵向排列,方向由上到下

column-severse:项目纵向排列,方向由下到上

技术图片

 

 

2.flex-wrap属性 决定了项目排列满屏,是否换行

flex-wrap:wrap | nowrap | wrap-reverse

nowrap(默认):不换行

wrap:换行,第一行在上面

wrap-reverse:换行,第一行在下面

技术图片

 

 

3.flex-flow 属性是flex-direction属性和flex-wrap属性的简写。

flex-flow:<flex-direction> <flex-wrap>

默认 flex-diretion:row nowrap;

4.justify-content:决定了项目在主轴上的对齐方式

justify-content:flex-start | flex-end  |  center |space-bewteen |space-around

flex-start(默认):左对齐

fle-end:右对齐

center:居中排列

space-between:两端对齐,项目之间的间隔都相等

space-around:每个项目的左右间隔都相等(每一个项目都被空白包围,且左右间隔相等)

技术图片

 

 

5.align-items属性 决定了项目在交叉轴上的对齐方式

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

flex-start:上对齐

flex-end:下对齐

center:居中对齐

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

stretch(默认):如果项目没有设置固定高度或设置为auto,项目则占满整个屏幕

技术图片

 

 

6.align-content属性 决定了多根轴线的对齐方式

 注意:若轴线只有一根则该属性不会起作用

align-content:flex-start | flex-end | center | space-around  | space-between | stretch

flex-start :与交叉轴的起点对齐,以上边界排列

flex-end:与交叉轴的终点对齐,以下边界排列

center:与交叉轴的中点对齐,中间排列

space-around:每根轴线的两侧间隔相等

space-between:与上边界与下边界两端对齐,且每根轴线的间隔相等

stretch(默认):轴线占满交叉轴

技术图片

 

以上是关于flex怎么用?常用的属性有哪些?的主要内容,如果未能解决你的问题,请参考以下文章

为啥flex-shrink属性不起作用

提效小技巧——记录那些不常用的代码片段

flex常见属性

css常用代码片段 (更新中)

flex 相关属性

flex 布局