flexBox布局

使用flexBox布局前需要给容器添加样式display:flex;

...
<style>
    .contain{
        display:flex;
    }
</style>
<div class="contain">
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
</div>

这一步骤是必须的！因为只有添加了这个样式，浏览器才会将他解析为flexbox布局。

flexBox布局中，作用在box容器的六大必记属性：

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

注意，下面的分析中的flex-items代表的是多个 flex-item。并且假设每个flex-box宽高都为200px。在下面的代码中将不会再写。

flex-direction

决定flex-items整体的排布方向(竖排？横排？竖排反转？or横排反转？)

这个css属性有以下几个值：

row ： flex-items整体横向排布
row-reverse ：flex-items整体横向排布，但items反转，如“123”横向排布变为“321”
column ： flex-items整体竖向排布
column-reverse ： flex-items整体竖向排布，但items反转

代码：

...
<style>
    .contain{
        display:flex;
        flex-direction:xxx;
    }
</style>
<div class="contain">
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
</div>

row

横向排布图

row-reserve

横向反转排布图

column

竖向排布图

column-reserve

竖向反转排布图

flex-wrap

决定flex-items一行排满后是否换行；应怎么换行；

no-wrap : 不换行（一行满了也不换）
wrap ：换行（一行满了换到下一行）
wrap-reverse ：换行反转，也就是第一行满了后。第一行与第二行位置反转。

no-wrap

不换行图

wrap

换行图

wrap-reverse

换行反转图

flex-flow

flex-direction与flex-wrap的结合体

<style>
    .contain{
        display:flex;
        flex-direction:row;
        flex-wrap:no-wrap;
        //合二为一的写法： flex-flow:row no-wrap;
    }
</style>

justify-content

在flex-direction指定的方向，对flex-items整体进行更细致的布局调整

flex-start
flex-end
center
space-between
space-around

<style>
    .contain{
        display:flex;
        flex-direction:row;
        justify-content:xxx;
    }
    //在下面的属性如align-items等演示中，默认flex-direction:row;
</style>
<div class="contain">
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
</div>

这里写图片描述

align-items

对flex-items 整体，在flex-direction指定的方向的垂直方向上，进行上、下或居中(假如flex-direction：row;)的调整

flex-start
flex-end
center

flex-start

flex-end

center

align-content

此方法与justify-content作用一样，但是作用方向是flex-direction指定方向的垂直方向。另外，这垂直方向上必须有flex-item，不然就没意义了

flex-start
flex-end
center
space-between
space-around

总结

看完上面的分析，总结有以下三点：
1. flex-direction：给flex-items所组成的整体指定排布方向。并且指定的方向在容器里作为排布的主方向
2. justify-content作用的方向是flex-direction指定的方向，对flex-items的布局进行更细微的调整
3. align-xxx作用的方向是flex-direction指定的方向的垂直方向

最后有一个要注意的是！

上面的六大属性中，有五种属性是作用在某个方向的！但是如果作用的那个方向没有足够的flex-item项目，那这个属性也就没有使用的意义。举个简单的例子

<style>
    .contain{
        display:flex;
        flex-direction:row;
    }
</style>
<div class="contain">
    <div class="flex-item"></div>
</div>

一个flex-item项目
虽然在flex-direction中指定row方向排布，但是只有一个flex-item是看不出效果的

<style>
    .contain{
        display:flex;
        flex-direction:xxx;
    }
</style>
<div class="contain">
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
</div>

三个flex-item项目
只有足够多的flex-item项目，我们才能看到该属性是否实现应有的效果

这篇我们讲解了flex容器的六大CSS属性。下篇我们将会讲解flex容器中项目flex-item的六大属性。

来源：CSDN

作者：CruellyJohn

链接：https://blog.csdn.net/qq_40421277/article/details/81542277

标签

flex布局

css

display

css样式

css之Flex布局（一）