基本使用

任何一个容器都可以指定为flex布局

.box {
display: flex;
}

行内元素也可以使用flex

.box {
display: inline-flex;
}

Webkit内核的浏览器,必须加上 -webkit 前缀

.box {
display: -webkit-flex;
disply: flex;
}

容器的属性

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-conteng
  • align-items
  • align-content

flex-direction

  • row(默认值):主轴为水平方向,起点在左端。
  • row-reverse:主轴为水平方向,起点在右边。(与row起点相反)
  • column:主轴为垂直方向,起点在上沿。
  • column:主轴为垂直方向,起点在下沿。(与column起点相反)

flex-wrap

默认情况下,项目都排在一条线(轴线)上。flex-wrap用于定义,如果一条轴线排不下,如何换行。

  • nowrap(默认):不换行
  • wrap:换行,第一行在上方。
  • wrap-reverse:换行,第一行在下方。(与wrap相反)

flex-flow

该属性是 flex-directionflex-wrap 的简写形式,默认为 row nowrap

justify-content

justify-cotent属性定义了项目在主轴上的对齐方式

  • flex-start(默认值):左对齐
  • flex-end:右对齐
  • center:居中
  • space-between:两端对齐,项目之间的间隔都相等。
  • space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

align-items

该属性定义项目在交叉轴上如何对齐

  • flex-start:交叉轴的起点对齐
  • flex-end:交叉轴的终点对齐
  • center:交叉轴的中点对齐
  • baseline:项目的第一行文字的基线对齐
  • stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

align-content

该属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

  • flex-start:与交叉轴的起点对齐
  • flex-end:与交叉轴的终点对齐
  • center:与交叉轴的中点对齐
  • space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
  • space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch(默认值):轴线占满整个交叉轴

项目的属性

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

order

定义项目的排列顺序。数值越小,排列越考前,默认为0。

flex-grow

定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

flex-shrink

定义项目的缩小比例,默认为1,即如果空间不足,该项目缩小。

如果所有项目的 flex-shrink 属性都为1,当空间不足时,都将等比例缩小。

如果一个项目的 flex-shrink 属性为0,其他项目都为1,则空间不足时,前者不缩小。

flex-basis

定义在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。

它的默认值为 auto,即项目的本来大小。它可以设为跟 widthheight 属性一样的值(比如350px),则项目将占据固定空间。

flex

flex-growflex-shrinkflex-basis的简写,默认值为 0 1 auto。后两个属性可选。

该属性有两个快捷值:auto1 1 auto)和 none0 0 auto)。

建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。

align-self

允许单个项目有与其他项目不一样的对齐方式,可覆盖 align-items 属性。默认为 auto,表示继承父元素的 align-items 属性,如果没有父元素,则等同于 stretch

该属性可能取6个值,除了auto,其他都与align-items属性完全一致。

参考

阮一峰的网络日志——Flex 布局教程

flex基本概念的更多相关文章

  1. css新特性 box-flex/flex 弹性盒状模型

    新接触的,可是我的张大神早在2010年就写了box,box-flex的用法 大神把box-flex用狗血电视剧分家产剧情比喻,生动形象地说明,让我理解得容易了些,唉大神好贴心,举例说明满分 ----- ...

  2. 2017年总结的前端文章——一劳永逸的搞定 flex 布局

    flex 基本概念 使用 flex 布局首先要设置父容器 display: flex,然后再设置 justify-content: center 实现水平居中,最后设置 align-items: ce ...

  3. 转---30 分钟学会 Flex 布局

    正文从这开始- Flex 基本概念: 在 flex 容器中默认存在两条轴,水平主轴(main axis) 和垂直的交叉轴(cross axis),这是默认的设置,当然你可以通过修改使垂直方向变为主轴, ...

  4. 一劳永逸的搞定 FLEX 布局(转)

    一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平.垂直同时居中.记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮, ...

  5. 搞定flex布局

    这几种方式的搭配使用可以轻松搞定 PC 端页面的常见需求,比如实现水平居中可以使用 margin: 0 auto,实现水平垂直同时居中可以如下设置: .dad { position: relative ...

  6. 一劳永逸的搞定 flex 布局

    一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平.垂直同时居中.记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮, ...

  7. Flex学习笔记

    Flex —— Flexible Box 弹性布局 用来为盒子模型提供灵活性 /* 块级元素 */ .box{ display: flex; } /* 行内元素 */ .box{ display: i ...

  8. 30 分钟学会 Flex 布局

    30 分钟学会 Flex 布局 有酒   617 人赞同了该文章 为什么我要写这一篇关于 Flex 布局的教程? 因为它十分简单灵活,区区简单几行代码就可以实现各种页面的的布局,以前我在学习页面布局的 ...

  9. flex布局整理以及demo

    flex: 概念: flex容器: display:flex flex项: 轴:水平的主轴.垂直的交叉轴 容器的属性: 1. flex-direction(决定主轴的方向.即项目的排列方向) 1.1 ...

随机推荐

  1. Mac从零配置Vim

    // 这是一篇导入进来的旧博客,可能有时效性问题. 1. 安装Homebrew (包管理器,用来安装Vim)& /usr/bin/ruby -e "$(curl -fsSL http ...

  2. IntelliJ IDEA 17和Maven构建javaWeb项目

    前言 电脑又断电了,眼看着写好的东西就没有了,这是第二次犯这个错误了.很难受呀!还是回到正题吧,我们来使用IDEA和Maven构建一个JavaWeb项目 软件环境: IDEA:2017.2.1 JDK ...

  3. Java多线程学习开发笔记

    线程有有序性和可见性 多个线程之间是不能直接传递数据交互的,它们之间的交互只能通过共享变量来实现. 在多个线程之间共享类的一个对象,这个对象是被创建在主内存(堆内存)中,每个线程都有自己的工作内存(线 ...

  4. 图的简单应用(C/C++实现)

    存档: #include <stdio.h> #include <stdlib.h> #define maxv 10//定义最大顶点数 typedef char elem;// ...

  5. [bzoj1811] [Ioi2005]mea

    还是比较好想到的..设第一个数为x,那么以后的所有数都能用x和M表示出来. 然后再根据非递减的限制条件得出x的取值范围. #include<cstdio> #include<iost ...

  6. UEP-自定义持久化类

    HY-UEP提供了两种持久化方式:基于JPA的持久化机制和自定义持久化机制,JPA的持久化机制 比较符合现在的软件开发模式,支持各种主流数据库;自定义持久化时我们平台产品的特有持久化 机制的升级,在综 ...

  7. [国嵌笔记][004][Linux快速体验]

    Linux文件系统 bin目录:可执行的程序 boot目录:与Linux启动相关的文件 dev目录:设备以文件的方式存放 etc目录:配置文件 home目录:用户文件 lib目录:与库相关的文件 ro ...

  8. 2017-6-14 踩坑小结(Android文件读写 相关问题)

    填坑 getSlotFromBufferLocked: unknown buffer: 0xab7115e0 1. 在棉花糖(6.0)上莫名出现 未知缓冲 错误,百度了一下,貌似这个是Android6 ...

  9. Spark算子--mapValues

    转载请标明出处http://www.cnblogs.com/haozhengfei/p/ccc9d6b5c46ac7209c1e104bd219bfb4.html mapValues--Transfo ...

  10. Spark算子--groupByKey

    转载请标明出处http://www.cnblogs.com/haozhengfei/p/0e90fe79f9f2e4b91a5d8e659ee68eaf.html groupByKey--Transf ...