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. vue + spring boot + spring security 前后端分离 携带 Cookie 登录实现 只写了个登录

    最近想弄一下vue 所以就自己给自己找坑入   结果弄的满身是伤 哈哈哈 首先我说下 前后端分离  跨域请求  我在网上找了一些  可是都是针对于 spring boot 的 我自己还有 securi ...

  2. 洛谷P1443 马的遍历

    https://www.luogu.org/problemnew/show/P1443 很经典的搜索题了,蒟蒻用广搜打的 不说了,上代码! #include<bits/stdc++.h> ...

  3. 【repost】Python正则表达式

    星光海豚   python正则表达式详解 正则表达式是一个很强大的字符串处理工具,几乎任何关于字符串的操作都可以使用正则表达式来完成,作为一个爬虫工作者,每天和字符串打交道,正则表达式更是不可或缺的技 ...

  4. 冒泡排序 cpp实现

    #include<bits/stdc++.h> using namespace std; void Bubblesort(int a[],int n){ ;i<n-;i++){ ; ...

  5. 本周对于java中lamdba表达式与内部进行了学习 ，以下是我在学习就中遇到的问题

    在java中,可以将一个类定义在另一个类里面或者一个方法里面,这样的类称为内部类.我觉得其实就是类的嵌套,在一个类中再定义一个类,这里已成员内部类为讲,内部类可以自由地运用外部类定义的方法,但外部类想 ...

  6. Openvswitch手册(5): VLAN and Bonding

    我们这一节来看Port 一般来说一个Port就是一个Interface,当然也有一个Port对应多个Interface的情况,成为Bond VLAN Configuration Port的一个重要的方 ...

  7. [转]深入理解 GRE tunnel

    我以前写过一篇介绍 tunnel 的文章,只是做了大体的介绍.里面多数 tunnel 是很容易理解的,因为它们多是一对一的,换句话说,是直接从一端到另一端.比如 IPv6 over IPv4 的 tu ...

  8. 《Tornado介绍》—— 读后总结

  9. java数据结构面试问题—快慢指针问题

    上次我们学习了环形链表的数据结构,那么接下来我们来一起看看下面的问题, 判断一个单向链表是否是环形链表? 看到这个问题,有人就提出了进行遍历链表,记住第一元素,当我们遍历后元素再次出现则是说明是环形链 ...

  10. FFmpeg命令行工具学习(二)：播放媒体文件的工具ffplay

    一.简述 ffplay是以FFmpeg框架为基础,外加渲染音视频的库libSDL构建的媒体文件播放器. 在使用ffplay之前必须要安装到系统中,MAC的安装教程为:http://www.cnblog ...