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. Java JSONArray for循环 remove成员的一个好算法

    好久没写日志了,今天来写一个,JSONArry fro循环判断value,移除不需要的,不需再将JSONArry再次转换成 map或list. JSONArray移除成员只能通过for遍历取成员,判断 ...

  2. 防范 SQL 注入攻击

     防范 SQL 注入攻击 我们执行的 SQL语句中包含变量,执行的时候会直接把变量内容替换进去.而如果攻击者在输入框中输入一些危险的字符(通常包含 SQL 注释符 --,以及其他预先精心设置的内容), ...

  3. 网站模仿——LOFTER个人主页

    代码片段 码云链接:https://gitee.com/gulveig/codes/e7q95kub6clvxt2ydi84g83

  4. MFC中的一些视图

    本章主要介绍MFC中主要的视图类,这些继承自Cview类. 继承关系如上图所示. 滚动视图 CscrollView给Cview添加了基本的滚动功能,它包含WM_VSCROLL和WM_HSCROLL消息 ...

  5. spring 单元测试方法及其错误整理

    spring 单元测试及其错误整理 目录: NO1 spring单元测试方法 - NO1.1 pom.xml文件中确认有下面依赖 - NO1.2 在需要测试的类上,或者新建的测试类上添加注解 - NO ...

  6. 架构（二）Maven安装以及Nexus配置

    一 Maven安装配置 1.1 下载 http://mirrors.tuna.tsinghua.edu.cn/apache/maven/maven-3/3.5.4/binaries/apache-ma ...

  7. asp.net中的Filter类型其实是被当作单例的

    Filter对请求进行过滤.例如,在进行身份验证的基础上增加一些权限判断,对于身份验证通过的用户,检测其是否有开通UserSpace,如果没有则在Response中说明.示例代码如下: public ...

  8. Windows 10 IoT Core 17115 for Insider 版本更新

    今天,微软发布了Windows 10 IoT Core 17115 for Insider 版本更新,本次更新只修正了一些Bug,没有发布新的特性. 一些已知的问题如下: F5 driver depl ...

  9. navicat 几个 可用的东西

    1.常用的 表格 一启动 就进入的某某连接某某数据库某某表 2. 结构 比对(菜单栏 “工具里面”) 3.数据对比 同上 4.保持连接 5.全局查询 在工具中查找 ------在数据库或模式中查找

  10. Spark机器学习解析下集

    上次我们讲过<Spark机器学习(上)>,本文是Spark机器学习的下部分,请点击回顾上部分,再更好地理解本文. 1.机器学习的常见算法 常见的机器学习算法有:l   构造条件概率:回归分 ...