【CSS】flex布局初认识

 1. 父容器为Flex容器，它有以下六个属性：

 

1）flex-direction: 
作用：决定主轴的方向（如果为row，那么x方向为主轴；如果为column，那么y方向为主轴）
属性：row | row-reverse | column | column-reverse;

2）flex-wrap: 
作用：换行，如果项目在一个主轴上排不下，如何换行
属性：nowrap | wrap | wrap-reverse;

3）flex-flow: 
作用：flex-direction + flex-wrap 的简写
属性：
默认值为: flex-flow: row nowrap;

4）justify-content: 
作用：定义项目在主轴上的对齐方式
属性：flex-start | flex-end | center | space-between | space-around;

5）align-items: 
作用：定义项目在交叉轴上如何对其
属性：stretch | flex-start | flex-end | center | baseline;

6）align-content: 
作用：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
属性：stretch | flex-start | flex-end | center | space-between | space-around

　　

 

 align-content的效果如下（x方向为主轴）：

                stretch (默认值)                                       flex-start                                              flex-end

                    

 

                center                                                  space-between                                         space-arround

                    

 

 

 

 

2. Flex容器下的项目（子）

 

1）order  定义项目的排列顺序。数值越小，排列越靠前，默认为0。
2）flex-grow  
3）flex-shrink  定义了项目的缩小比例，默认为1。 
4）flex-basis   定义了在分配多余空间之前，项目占据的主轴空间（main size）
5）flex   flex-grow,flex-shrink,flex-basis的简写，默认值为0 1 auto。后两个属性可选。
6）align-self   自定义垂直方向的对其方式，允许单个项目有与其他项目不一样的对齐方式，
               可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属
               性，如果没有父元素，则等同于stretch。

　　

　　

　　

3  auto与none

flex：auto;   等同于 flex：1 1 auto; 意思就是占满额外空间，可缩放。

flex:none;     等同于flex：0 0 auto；  意思是不占额外空间，不可缩放。从字面上解释大概就是可弹性与不可弹性。

flex:initial（默认） 等同于 0 1 auto；意思是不能伸长（不占满额外空间），可缩放。

 

 

 

4  转发链接

1. flex-grow、flex-shrink、flex-basis详解

2. flex-grow、flex-shrink、flex-basis详解

3.Flex布局整理

 

 

 

5 附测试代码

<!DOCTYPE=html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>
        Align-content
    </title>
<style>
    #father{ 
        width:200px;
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
        align-content:strech;
        height:200px;
        background-color:grey;
    }
    .son1{
        height:30px;
        width:100px;
        background-color:orange;
    }
    .son2{
    
        height:30px;
        width:100px;
        background-color:red;
    }
    .son3{    
        height:30px;
        width:100px;
        background-color:#08a9b5;
    }
</style>
</head>
<body>
    <div id="father">
        <div class="son1">
            1
        </div>
        <div class="son2">
            2
        </div>
        <div class="son3">
            3
        </div>
        <div class="son3">
            4
        </div>
        <div class="son3">
            5
        </div>
    </div>
</body>
</html>

代码来自：https://www.cnblogs.com/liyu2012/p/5525609.html

 

 

 

-end-

 

posted @ 2017-12-19 18:56  彭胜光  阅读(431)  评论(0)    收藏  举报