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. 微信浏览器里在底部的输入框,ios11的不会被遮盖、10.1会被盖住

    /** * 由于ios10 和 ios11 版本之间的差异,所以先判断ios系统版本之后再做处理 */ let str = navigator.userAgent.toLowerCase(); let ...

  2. web安全系列2:http初探

    web安全系列的第二篇 首先,我们先来理解两个名词C/S架构和B/S架构. 所谓C/S架构,就是客户机/服务器架构,而B/S架构就是浏览器/服务器架构.C/S是通常的桌面程序的架构方式,而B/S就是网 ...

  3. 关于分布式事务,XA协议的学习笔记

    XA分布式事务协议,包含二阶段提交(2PC),三阶段提交(3PC)两种实现. 1.二阶段提交方案:强一致性 事务的发起者称协调者,事务的执行者称参与者. 处理流程: 1.准备阶段 事务协调者,向所有事 ...

  4. 前端(主要html/css)学习笔记

    一个浪漫的网站: http://www.romancortes.com/blog/1k-rose/

  5. html/css 表格元素以及表格布局

    一,html之表格 1,一个完整的html表格所包含的元素 <!--一个完整的html表格--> <!--cellpadding代表单元格内的文字和单元格边框之间的间距--> ...

  6. 关于数据库连接时URL的问题

    最近在写一个简单的增删改查的代码时,遇到保存的中文都会变成问号(?),由于刚开始只是一些数据的保存,所以认为之后只要对数据库的编码进行修改即可,但是后来要对数据进行查找的时候发现根本查找不到, 当时用 ...

  7. 华为云服务器为Tomcat配置SSL

    近期由于开发小程序需要在云服务器上配置https访问协议,也遇到了一点小问题,把配置过程记录一下:SSL 证书申请下来之后会有 .jks .crt .pfx .pem为后缀的文件(如何申请SSL证书这 ...

  8. noip第24课资料

  9. IntelliJ IDEA 和谐地址及快捷键

    转载:http://my.oschina.NET/dyyweb/blog/494504 http://blog.csdn.net/tanlon_0308/article/details/5085473 ...

  10. 利用正则+requests爬取猫眼电影信息

    import json # from multiprocessing import Pool import requests from requests.exceptions import Reque ...