flex container(flex容器 或 弹性容器

flex容器是flex元素的的父元素。 通过设置display 属性的值为flex 或 inline-flex定义。

注旧版本的属性值:

  • box:将对象作为弹性容器显示。(最老版本)
  • inline-box:将对象作为内联块级弹性容器显示。(最老版本)
  • flexbox:将对象作为弹性容器显示。(过渡版本)
  • inline-flexbox:将对象作为内联块级弹性容器显示。(过渡版本)

flex item(flex子元素 或 弹性子元素)

flex容器的每一个子元素均为一个flex子元素。注意:felx容器直接包含的文本变为匿名的弹性子元素。

注意:Flexbox布局和原来的布局是2套概念,所以部分css属性在flex子元素中将不起作用,比如:floatclear , vertical-align , column-*

每个flex子元素沿着主轴(main axis)依次相互排列。交叉轴(cross axis)垂直于主轴

  • 属性 flex-direction 定义主轴方向。
  • 属性 justify-content 定义了flex子元素如何沿着主轴排列。
  • 属性 align-items 定义了flex子元素如何沿着交叉轴排列。
  • 属性 align-self 覆盖父元素的align-items属性,定义了单独的flex子元素如何沿着交叉轴排列。

方向

flex容器的主轴起点边缘(main start)主轴终点边缘(main end)和 交叉轴起点边缘(cross start),交叉轴终点边缘(cross end)为flex子元素排列的起始和结束位置。它们具体取决于由writing-mode(从左到右、从右到左等等)属性建立的向量中的主轴和交叉轴位置。

  • 属性 order 将元素依次分组,并决定谁先出现。
  • 属性 flex-flow 是属性 flex-direction 和 flex-wrap 的简写,用于排列flex子元素。

flex子元素根据 flex-wrap 属性控制的侧轴方向(在这个方向上可以建立垂直的新线),既可以是一行也可以是多行排列。

尺寸

flex子元素宽高可相应地等价于主尺寸(main size)交叉尺寸(cross size),它们都分别取决于flex容器的主轴和侧轴。

  •  min-height 和 min-width 属性的初始值为新增关键字 auto。
  • 属性 flex 是 flex-basisflex-grow 和 flex-shrink 的缩写,代表flex子元素的伸缩性。

Flexbox布局的基本概念的更多相关文章

  1. flexbox布局神器

    前言 2009年,W3C提出了一种新的方案----Flexbox布局(弹性布局),可以简便.完整.响应式地实现各种页面布局.Flex布局模型不同于块和内联模型布局,块和内联模型的布局计算依赖于块和内联 ...

  2. Flexbox布局(转)

    Flexbox布局( Flexible Box 或CSS3 弹性布局),是CSS3中的一种新的布局模式,是可以自动调整子元素的高和宽,来很好的填充任何不同屏幕大小的显示设备中的可用显示空间,收缩内容防 ...

  3. React Native 开发之 (05) flexbox布局

    一  flexbox布局 1 flex布局 flexbox是ReactNative 应用开发中必不可少的内容,也是最常用的内容. 传统的页面布局是基于盒子模型,依赖定位属性,流动属性和显示属性来解决. ...

  4. CSS3之Flexbox布局

    CSS3为我们提供了一种可伸缩的灵活的web页面布局方式-flexbox布局,它具有很强大的功能,可以很轻松实现很多复杂布局,在它出现之前,我们经常使用的布局方式是浮动或者固定宽度+百分比来进行布局, ...

  5. 三分钟学会CSS3中的FLEXBOX布局

    原文地址,保护版权,请勿转载:http://page.factj.com/blog/p/2574 这篇文章里我们将学习CSS里flexbox布局的几个最重要的概念,通过学习flexbox布局,你会发现 ...

  6. 一篇完整的FlexBox布局指南

    一篇完整的FlexBox布局指南 转载请标注本文链接并附带以下信息: 译:Cydiacen 作者:CHRIS COYIER 原文:A Complete Guide to Flexbox 原文更新于 2 ...

  7. Flexbox布局指南

    Flexbox布局概念 Flexbox布局( Flexible Box 或CSS3 弹性布局),是CSS3中的一种新的布局模式,是可以自动调整子元素的高和宽,来很好的填充任何不同屏幕大小的显示设备中的 ...

  8. React Native基础&入门教程:初步使用Flexbox布局

    在上篇中,笔者分享了部分安装并调试React Native应用过程里的一点经验,如果还没有看过的同学请点击<React Native基础&入门教程:调试React Native应用的一小 ...

  9. 聊聊Flexbox布局中的flex的演算法

    到目前为止,Flexbox布局应该是目前最流行的布局方式之一了.而Flexbox布局的最大特性就是让Flex项目可伸缩,也就是让Flex项目的宽度和高度可以自动填充Flex容器剩余的空间或者缩小Fle ...

随机推荐

  1. DICOM-RT:放疗流程与參与角色

    背景: 放疗是一个复杂的过程,同一时候须要肿瘤医师.模拟定位技师.剂量师.物理师.治疗技师.护士等多重角色參与.总体流程涉及到成像系统.定位系统.计划系统.治疗系统.质控QA系统.信息管理系统等多个独 ...

  2. 常用DOS下MSC指令

    xp:copy C:\WINDOWS\repair\*.* 到 c:\windows\system32\config 2k: copy C:\winnt\repair\*.* 到 c:\winnt\s ...

  3. app上架的问题

    1..p12证书文件(钥匙串导出)开发证书和描述文件的 2.app打包好重Xcode上传到iTunes中的时候最好做校验: 3.程序跑真机出现的问题 解决方法:debug 模式改成release模式 ...

  4. __sizeof__()

    https://bugs.python.org/issue2898 https://bugs.python.org/file10353/footprint.patch Index: Python/sy ...

  5. Android系统开发入门

    Android操作系统 Android是一个基于Linux.使用java作为程序接口的操作系统. 他提供了一些工具,比如编译器.调试器.还有他自己的仿真器(DVM — Dalvik Virtual M ...

  6. python 将屏幕输出定向到变量中

    #!/usr/bin/python # -*- coding: utf-8 -*- import sys import subprocess as sp def main(): cmd = 'syst ...

  7. Typescript 常见写法

    一.Typescript 中数组 let list: number[] = [1, 2, 3]; let list: Array<number> = [1, 2, 3];

  8. linux静默安装Oracle 11g

    ./runInstaller -silent -force -responseFile /home/oracle/software/database/response/orcl_install.rsp ...

  9. SPOJ:Another Version of Inversion(二维数组的逆序对)

    DCE Coders admins are way much geekier than they actually seem! Kartik has been following that tradi ...

  10. 空间数据索引RTree完全解析及Java实现

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/MongChia1993/article/details/69941783 第一部分 空间数据的背景介 ...