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. 在idea中，mavne项目使用mybatis-generator-maven-plugin自动生成实体了的时候，在maven插件里面始终不显示

    最近想学习mybatis的知识,自己搭了个简单的ssm框架,想通过插件自动生成实体类,发现想要的插件一直都没显示出来,着实很郁闷: pom.xm中的配置: <!--mybatis-generat ...

  2. eslint 的 env 配置是干嘛使的？

    这笔修改体现了 env 和 global 的关系: https://github.com/g8up/youDaoDict/commit/8b05616f 官方文档表述: https://eslint. ...

  3. c++实现对windwos 下socket 的封装(实现封包及拆包处理)

    SuperSocket.h #pragma once #include<string> #include<iostream> #include <WINSOCK2.H&g ...

  4. kubernetes CRD学习笔记

    前言 最近在极客时间订阅了kubernetes的专栏,这篇文章是想记录一下自己学习CRD(custom resource definition)的过程,加深一下记忆. 准备工作 首先安装一下我们用的g ...

  5. MVC实例应用

    MVC是Model-View-Controller的简称,即模型-视图-控制器.MVC是一种设计模式, 它把应用程序分成三个核心模块:模型.视图.控制器,它们各自处理自己的任务. 1.模型(Model ...

  6. day23_雷神_crm-day2

    # 俺滴第一个项目 CRM MdelForm 实现增删改查 1. ModelForm,重写 __init__ 方法,给所有字段添加 form-control 样式. 2. ModelForm,报错错误 ...

  7. 包建强的培训课程（14）：Android与ReactNative

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...

  8. Spring Boot 2 - 使用CommandLineRunner与ApplicationRunner

    本篇文章我们将探讨CommandLineRunner和ApplicationRunner的使用. 在阅读本篇文章之前,你可以新建一个工程,写一些关于本篇内容代码,这样会加深你对本文内容的理解,关于如何 ...

  9. Python 操作excel之 openpyxl模块

    1. 安装 pip install openpyxl 想要在文件中插入图片文件,需要安装pillow,安装文件:PIL-fork-1.1.7.win-amd64-py2.7.exe · font(字体 ...

  10. 使用sklearn估计器构建K-Means聚类模型

    实例要求:以sklearn库自带的iris数据集为例,使用sklearn估计器构建K-Means聚类模型,并且完成预测类别功能以及聚类结果可视化. 实例代码: import pandas as pd ...