flex 左右布局_Flex布局

flex布局详解

作者: 郭政鸿 2020/9/1

前言: 早期的web主流的布局都是采用table布局, 然后就是div+float+position一把梭,H5 出来之后无非把div变成语义化标签. 但是有个css3规范里出了个非常好用的布局属性.没错,就是本文的主角flex.

先上个我画的思维导图,总览一下flex布局都包含了哪些属性.

目录

• 一. flex容器的属性

  • 1) flex-direction属性

  • 2) flex-wrap属性

  • 3) flex-flow属性

  • 4) justify-content属性

  • 5) align-items属性

  • 6) align-content属性

• 二. flex子元素的属性

  • 1) order属性

  • 2) flex-grow属性

  • 3) flex-shrink属性

  • 4) flex-basis属性

  • 5) flex属性

  • 6) align-self属性

• 三. 小提示

一. flex容器的属性

1) flex-direction属性

语法flex-direction: row | row-reverse | column | column-reverse

flex-direction决定的是flex布局的方向,是横向(row)还是竖向(column)

首先我们得明白flex布局的顺序: 从左到右, 从上到下

2) flex-wrap属性

语法flex-wrap: no-wrap | wrap | wrap-reverse

wrap: 空间不足时换行显示

no-wrap: 空间不足也不换行, 挤压元素

wrap-reverse: 与flex-direction定义的反方向换行

3) flex-flow属性

语法flex-flow: ||

这是flex-direction和flex-wrap的缩写属性

demo:

.wrap {
 display: flex;
  flex-wrap: row-reverse wrap-reverse;
}

4) justify-content属性

语法justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;

直接上效果?:

flex-start

flex-end

center

space-between

两端对齐,多余空间在中间分配

space-around

左右的间隙等于中间元素的间距的一半

space-evenly

左右和中间的间隙都平均分配

5) align-items属性

语法align-items: stretch | flex-start | flex-end | center | baseline;

声明子元素在竖直方向上的对齐方式

stretch:

默认值,根据子元素的高度拉深

flex-start:

与文档流方向相关, 表现为顶部对齐

flex-end:

与文档流方向相关, 表现为底部对齐

center:

表现为竖直方向上居中对齐

baseline:

表现为所有flex子项都相对于flex容器的基线(字母x的下边缘)对齐。

6) align-content属性

和justify-content属性相似, 可以看做竖直方向上的justify-content, 但是需要注意一点, 当只有单行元素的时候align-conteng属性是不生效的.

二. flex子元素的属性

1) order属性

修改order值可以改变子元素的排列顺序.

语法order: 默认值0

.box3 {order: -1}

image-20200901002251678

2) flex-grow属性

grow是拓展的意思, 给元素设置后会按照flex-grow的属性值进行宽度拓展

语法flex-grow:; /* 数值，可以是小数，默认值是 0 */

可以把所有的剩余空间当做1, 如果所有元素的flex-grow值之和小于1,就按值分配空间,并不是必须占据完剩余空间.

如果所有元素的flex-grow值大于1, 则将剩余空间按各个元素的flew-grow值的比例进行分配剩余空间.

3) flex-shrink属性

和grow是相反的关系, grow是按照数值比例进行放大, shrink是按照一定数值比例进行收缩

语法 flex-shrink: / 数值，默认值是 1 /

参考flex-grow属性, 一个放大一个缩小的关系.

4) flex-basis属性

语法flex-basis:|auto / auto是默认值 /

默认值是auto,此时,元素的宽度受到以下属性影响, 同时设置flex-basis和width内容宽度超过width设置值后, width是表现无效的.

• box-sizing盒模型(默认是content-box)；
• width/min-width/max-width等宽度属性；
• content内容(min-content最小宽度)；

flex-basis属性除了接受数值,还接受关键字值

/* 根据flex子项的内容自动调整大小 */
flex-basis: content;

/* 内部尺寸关键字 */
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;

但是使用关键值属性时应该注意其浏览器兼容性

浏览器兼容性查询地址:

https://www.caniuse.com/

flex-basis属性的妙用, 替代min-width和max-width实现小于指定大小自动等分换行布局

<style>.container {display: flex;flex-wrap: wrap;
}.item {flex-basis: 100px;flex-grow: 1;
}style>
<div class="container">
 <div class="item">div>
  <div class="item">div>
  <div class="item">div>
  <div class="item">div>
div>

5) flex属性

flex属性是flex-grow，flex-shrink和flex-basis的缩写。

语法flex: none | auto | [ ? || ]

第一个属性值为: flex-grow, 第二第三个分别为: flex-shrink和flex-basis可省略

• flex默认值等同于flex:0 1 auto；
• flex:none等同于flex:0 0 auto；
• flex:auto等同于flex:1 1 auto；

6) align-self属性

align-self声明的是但那个元素的竖直方向上的对齐方式, 与align-item不同的是, align-item是多所有子元素同时设置。

语法align-self: auto | flex-start | flex-end | center | baseline | stretch;

三. 小提示

在Flex布局中，flex子元素的设置float，clear以及vertical-align属性都是没有用的。