flex布局又称为盒子布局或弹性布局,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为 Flex 布局。 给父容器添加display: flex/inline-flex;属性,即可使容器内容采用弹性布局显示,而不遵循常规文档流的显示方式;设为flex布局以后,子元素的float、clear和vertical-align属性将失效!

采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。

容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。 
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

容器最核心的6个属性:

项目的6个核心属性:

flex布局属性说明的更多相关文章

  1. CSS Flex布局属性整理

    Flex布局 display: flex; 将对象作为弹性伸缩盒展示,用于块级元素 display: inline-flex; 将对象作为弹性伸缩盒展示,用于行内元素 注意兼容问题: webkit内核 ...

  2. 微信小程序 | flex布局属性

    flex-direction 主轴方向 row: 横向 row-reverse: 横向倒序 column: 纵向 column-reverse: 纵向倒序; flex-wrap 元素排列换行 nowr ...

  3. Flex 项目属性:flex 布局示例

    flex属性: flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto.后两个属性可选. 该属性有两个快捷值:auto (1 1 auto ...

  4. flex布局知识点

    flexBox 布局最合适小规模布局,而网格布局适合较大规模布局. float,clear,vertical-align  在flex中不起作用. flex布局中,有两类作用于父节点也子节点的样式,大 ...

  5. css3 深入理解flex布局

    一.简要介绍 css3最喜欢的新属性之一便是flex布局属性,用六个字概括便是简单.方便.快速. flex( flexible box:弹性布局盒模型),是2009年w3c提出的一种可以简洁.快速弹性 ...

  6. 30分钟彻底弄懂flex布局

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由elson发表于云+社区专栏 目前在不考虑IE以及低端安卓机(4.3-)的兼容下,已经可以放心使用flex进行布局了.什么是flex布 ...

  7. 弄懂flex布局

    目前在不考虑IE以及低端安卓机(4.3-)的兼容下,已经可以放心使用flex进行布局了.什么是flex布局以及它的好处,这里就不再赘述. 在这篇文章里,想说说flex布局的属性语法及其细节.那么网上也 ...

  8. CSS flex 布局快速入门

    以前已经学过flex了,一直没做笔记,现在做下笔记再回忆下. 首先,flex布局的迷之属性们,如果一知半解,机械记忆的话,那不到半个月基本忘光光.先感受一下这12个flex布局属性,是不是很“迷”人. ...

  9. 一篇文章弄懂flex布局

     壹 ❀ 引 谈到flex布局,我不知道有多少人跟我一样,在本能的想到justify-content:center与align-items:center两条属性之后,除此之外的其它属性居然显得格外陌生 ...

随机推荐

  1. 阿里云应用高可用 AHAS 正式商用,可一键提升云上应用可用性

    在分布式架构环境下,服务间的依赖日益复杂,可能没有人能说清单个故障对整个系统的影响,构建一个高可用的分布式系统面临着很大挑战. 7月17日,阿里云应用高可用服务AHAS 正式商用,包含架构感知.流控降 ...

  2. qbao

    # -*- coding: utf-8 -*- import Image, cStringIO, webbrowser, re, time, math import urllib, urllib2, ...

  3. iOS:学习runtime的理解和心得

    http://www.cocoachina.com/ios/20150901/13173.html 作者:兴宇是谁 授权本站转载. Runtime是想要做好iOS开发,或者说是真正的深刻的掌握OC这门 ...

  4. @游记@ CSP2019

    目录 @day -??@ @day -1@ @day 0@ @day 1@ @day 2@ @day ??@ @day ??+1@ @day -??@ 和 yhn 学长在校外偶遇. 聊了一些.他说现在 ...

  5. jQuery 五角星评分

    五角星打分 我用的是搜狗输入法上带的特殊符号打出来的  空五角星:☆  实五角星:★ 1.html <ul class="comment"> <li>☆&l ...

  6. Python基础:19类和实例的内建函数

    1:issubclass() issubclass()布尔函数,判断一个类是否是另一个类的子类或子孙类.它有如下语法:issubclass(sub,sup) 这个函数也允许“不严格”的子类,意味着,一 ...

  7. DAMICON'S LIST OF OPEN SOFTWARE

    http://www.damicon.com/resources/opensoftware.html DAMICON'S LIST OF OPEN SOFTWARE This List of Open ...

  8. oracle WHERE子句中的连接顺序

    ORACLE采用自下而上的顺序解析WHERE子句,根据这个原理,表之间的连接必须写在其他WHERE条件之前, 那些可以过滤掉最大数量记录的条件必须写在WHERE子句的末尾. 例如: (低效,执行时间1 ...

  9. [kuangbin带你飞]专题九 连通图C - Critical Links UVA - 796

    这道题就是要求桥的个数. 那么桥相应的也有判定的定理: 在和u相邻的节点中,存在一个节点是最小的时间戳都比 当前u的访问次序要大,也就是说这个点是只能通过果u到达,那么 他们之间相邻的边就是的桥 #i ...

  10. 2019-7-29-NetBIOS-计算机名称命名限制

    title author date CreateTime categories NetBIOS 计算机名称命名限制 lindexi 2019-07-29 09:59:17 +0800 2018-12- ...