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-

【CSS】flex布局初认识的更多相关文章

  1. CSS Flex布局完全指南 #flight.Archives002

    Title/CSS Flex布局完全指南 #flight.Archives002 序(from Ruanyf) : 网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模 ...

  2. css flex布局

    关于flex布局的一些简单用法 效果(下图) 实现代码: <!--html--> <div class="wrap"> <div class=&quo ...

  3. CSS flex 布局快速入门

    以前已经学过flex了,一直没做笔记,现在做下笔记再回忆下. 首先,flex布局的迷之属性们,如果一知半解,机械记忆的话,那不到半个月基本忘光光.先感受一下这12个flex布局属性,是不是很“迷”人. ...

  4. 轻轻松松学CSS:Flex布局

     Flex布局就是"弹性布局",它可以简便.完整.响应式地实现各种页面布局.引入弹性布局的目的,当页面需要适应不同的屏幕大小确保元素拥有恰当的布局方式,对一个容器中的子元素进行排列 ...

  5. CSS+DIV布局初练—DIV元素必须成对出现？

    一直做C/S开发的工作,但是很少做和布局相关的工作,往往都是同事将界面设计好,自己填写代码而已,对于B/S的工作,做过,但是很少没有像C/S这么多,界面布局的话,更无从谈起. 日子就这么过,一天一个样 ...

  6. css flex布局详解

    来源:https://blog.csdn.net/liveinmylife/article/details/51838939 1,flex布局是个什么东西? 官方说法:Flex是Flexible Bo ...

  7. CSS Flex布局整理

    Flex布局 display: flex; 将对象作为弹性伸缩盒展示,用于块级元素 display: inline-flex; 将对象作为弹性伸缩盒展示,用于行内元素 注意兼容问题: webkit内核 ...

  8. [Web 前端 ] 还在用浮动吗？CSS flex布局你了解多少？

    cp from : https://blog.csdn.net/wwwxuewen/article/details/80859764 传统的布局:围绕盒子模型(border.margin.paddin ...

  9. CSS Flex布局属性整理

    Flex布局 display: flex; 将对象作为弹性伸缩盒展示,用于块级元素 display: inline-flex; 将对象作为弹性伸缩盒展示,用于行内元素 注意兼容问题: webkit内核 ...

随机推荐

  1. Goldwave-5.7[逆向流程+算法分析]

    目标程序:Goldwave 5.7 分析工具: 1.OllyDbg 2.IDAPro 目的:用C语言写Goldwave-5.7的注册机. 0x0思路: 1.注册机准备: 功能:输入用户名后经过计算输出 ...

  2. linux系统中使用socket直接发送ARP数据

    这个重点是如这样创建socket:  sock_send = socket ( PF_PACKET , SOCK_PACKET , htons ( ETH_P_ARP) ) ; 其后所有收发的数据都是 ...

  3. mybatis框架的注意点

    1.在mapper.xml文件中 resultType:返回结果类型,只能用于单表 paramsType:接收参数类型,基本数据类型可省略 2.给实体类起别名 在mybatisConfig.xml配置 ...

  4. getElementById和$()获取值一点注意事项

    <script type="text/javascript"> window.onload = function () { var obj = document.get ...

  5. OpenGIS

    OpenGIS(Open Geodata Interoperation Specification,OGIS-开放的地理数据互操作规范)由美国OGC(OpenGIS协会,Open Geospatial ...

  6. 图像处理及opencv汇总

    OPENCV——C++ 1.windows基于vs2017的opencv安装 2.为opencv添加contrib库 3.opencv源码编写规则 4.OpenCV库框架结构 5.OpenCV从2到3 ...

  7. sort()方法的应用（二）

    引用:函数作为参数 var fn_by = function(id) { return function(o, p) { var a, b; if (typeof o === "object ...

  8. ubuntu下file_get_contents返回空字符串

    ubuntu下file_get_contents返回空字符串 | 浏览:302 | 更新:2014-03-30 10:11 本文起初面临的问题是PHP中SoapClient不好使,最后file_get ...

  9. 卷积神经网络中的channel 和filter

    在深度学习的算法学习中,都会提到 channels 这个概念.在一般的深度学习框架的 conv2d 中,如 tensorflow .mxnet,channels 都是必填的一个参数. channels ...

  10. Product and Sum in Category Theory

    Even if you are not a functional programmer, the notion of product type should be familiar to you, e ...