1,display:flex

  这个在父容器中声明;

2,flex-direction:row / column

  默认为横向,也在父容器中设置,定义flex布局的主轴方向;一条轴为主轴,那么另一条轴自然而然就是副轴;

3,flex:1

  在子元素中设置,表示所有的子元素不管内容如何,其宽度和高度都完全一样,且加起来刚好充满父容器;

4,align-items:center | flex-start | flex-end | space-between | space-around

  这个表示元素在副轴方向上的排列;

5,justify-content:center | flex-start | flex-end | space-between | space-around

  表示元素在主轴方向上的排列,在父容器中设置,center代表所有元素挤到最中间显示,如下:

  而space-between则意味着空格将主要处于横向页面的中间,换言之,左右两边界没有空隙,效果如下:

  space-around则代表所有的子元素左右间隙相等,左右边界均有空隙,效果如下:

6.flex-wrap:no-wrap(默认)  |  wrap

  这是关于是否换行的问题,如已经设置子元素的大小,但子元素的数量加起来长度超过屏幕一行,那么因为默认是不换行的,子元素原来被设置的宽度将被压缩,所有子元素硬挤在一行显示,如下。

  

  更改属性flex-wrap:wrap,让其换行显示,子元素的宽高又恢复正常,看下图

flex布局常见用法小结的更多相关文章

  1. Flex 布局相关用法

    前言: 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 就不容易实现. 2009年,W3C提出了 ...

  2. C++ 指针常见用法小结

    1. 概论 2.指针基础 3. 指针进阶 4. 一维数组的定义与初始化 5. 指针和数组 6. 指针运算 7. 多维数组和指针 8. 指针形参 9. 数组形参 10. 返回指针和数组 11. 结语   ...

  3. flex布局相关用法

    /* pages/classic/classic.wxss */ .chunk { /* 行内元素可设置但是设置了flex,无效了 *//* display: inline-block; */ wid ...

  4. flex布局开发

    flex布局开发 布局原理 flex时flexible Box的缩写,意为"弹性布局",用来为盒子模型提供最大的灵活性,任何一个容器都可以定位flex布局 [注意] 当我们为父盒子 ...

  5. flex布局使用方法简要汇总

    近期因为使用inline-block,在项目部署后出现了一点小问题,几番解决未果,遂使用flex布局,于是借此机会对flex布局的用法做一个简要的汇总. 遇到的bug如下: 本想两个div使用inli ...

  6. 用Flex实现常见的几种布局

    用Flex实现常见的几种布局 1.水平,垂直居中. <style type="text/css"> .container{ display: flex; width: ...

  7. 理解CSS3里的Flex布局用法

    一.Flex布局是什么? Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. .box{ disp ...

  8. 三大Flex布局用法(转载)

    Flex布局基础 对于Flex 初学者,在Hello World之后,Flex布局便是下一站学习要的要义.若是从传统的Html转变而来,总希望找到类似于Div/Table/UL等之类的控件,也希望在 ...

  9. React Native 中的 Flex Box 的用法(水平布局、垂直布局、水平居中、垂直居中、居中布局)

     版权声明:本文仅供个人学习. CSS 中 Flex-Box 语法链接 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html Flex 是 ...

随机推荐

  1. web安全系列4:google语法

    这是web安全的第四篇,欢迎翻看前面几篇. 前面我们介绍了一些和HTTP有关知识,那么一个疑问就是黑客要做的第一件是什么?其实很简单,确定一个目标,然后搜集信息. 这很容易理解,我们无论做什么都得先有 ...

  2. java根据图片创建日期,或最后修改日期重命名

    import java.io.BufferedReader; import java.io.File; import java.io.FileNotFoundException; import jav ...

  3. 解决在静态页面上使用动态参数,造成spider多次和重复抓取的问题

    我们在使用百度统计中的SEO建议检查网站时,总是发现“静态页参数”一项被扣了18分,扣分原因是“在静态页面上使用动态参数,会造成spider多次和重复抓取”.一般来说静态页面上使用少量的动态参数的话并 ...

  4. PHP安装+使用

        curl -s http://php-osx.liip.ch/install.sh | bash -s 5.4       ...... Extracting usr/local/php5-5 ...

  5. LOJ-10109(欧拉回路)

    题目链接:传送门 思路: 就是简单的找欧拉回路,不过要注意dfs边时要将边的编号/2,不然会分不清那条边每被遍历. #include<iostream> #include<cstdi ...

  6. wx 参数传值

    1: data-id 我们可以给HTML元素添加自定义的data-*属性 example:   假设页面里有下面的元素存在: <div id="myDiv" data-nam ...

  7. numpy 与 matplotlib 的应用

    numpy 与 matplotlib 的应用 一.库函数介绍 1. numpy库 NumPy(Numeric Python)提供了一个N维的数组类型ndarray,Numpy底层使用C语言编写,内部解 ...

  8. CSS伪类的理解

    因为之前一直对css伪类没有过多的了解,在网上看到一段css代码,不能理解 a:hover span.title{ color:red; ......... } 现通过查询css手册,其实css伪类只 ...

  9. Hadoop 和 MPP 的比较

    如果我们回顾5年前会发现,那就是当时Hadoop不是大多数公司的选择,特别是那些要求稳定和成熟的平台的企业. 在这一刻,选择非常简单:当您的分析数据库的大小超过5-7 TB时,您只需启动MPP迁移项目 ...

  10. scrapy爬虫之断点续爬和多个spider同时爬取

    from scrapy.commands import ScrapyCommand from scrapy.utils.project import get_project_settings #断点续 ...