·您当时的方位:主页 > 技能教程 > Html5技能 >

[html5]一文看懂什么是display:flex 布局

时刻:2019-03-25 08:34csdn.net
布局的传统解决方案,依据盒状模型,依靠 display特点 + position特点 + float特点。它关于那些特别布局十分不方便,比方,笔直居中就不简单完成。

布局的传统解决方案,依据盒状模型,依靠 display特点 + position特点 + float特点。它关于那些特别布局十分不方便,比方,笔直居中就不简单完成。

一、Flex布局是什么?

Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型供给最大的灵活性。

任何一个容器都能够指定为Flex布局。

  1. .box1{
  2. display: flex;
  3. }
  4. .box2{
  5. display: inline-flex; <span style="font-family: Arial, Helvetica, sans-serif;">/*</span><span style="font-family: Arial, Helvetica, sans-serif;">行内元素也能够运用Flex布局。*/</span>
  6. }
  7. .box3{
  8. display: -webkit-flex; /* Safari ,Webkit内核的浏览器,有必要加上-webkit前缀。*/
  9. display: flex;
  10. }


留意,设为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。

三、容器的特点

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

3.1 flex-direction特点

flex-direction特点决议主轴的方向(即项目的摆放方向)。
  1. .box {
  2. flex-direction: row | row-reverse | column | column-reverse;
  3. }
  • row(默许值):主轴为水平方向,起点在左端。
  • row-reverse:主轴为水平方向,起点在右端。
  • column:主轴为笔直方向,起点在上沿。
  • column-reverse:主轴为笔直方向,起点鄙人沿。
 

 3.2flex-wrap特点

默许情况下,项目都排在一条线(又称"轴线")上。flex-wrap特点界说,假如一条轴线排不下,怎么换行。
  1. .box{
  2. flex-wrap: nowrap | wrap | wrap-reverse;
  3. }
(1)nowrap(默许):不换行。
(2)wrap:换行,榜首行在上方。
(3)wrap-reverse:换行,榜首行鄙人方。
 

3.3 flex-flow

flex-flow特点是flex-direction特点和flex-wrap特点的简写办法,默许值为row nowrap。
 
  1. .box {
  2. flex-flow: <flex-direction> || <flex-wrap>;
  3. }


3.4 justify-content特点

justify-content特点界说了项目在主轴上的对齐办法。
 
 
  1. .box {
  2. justify-content: flex-start | flex-end | center | space-between | space-around;
  3. }
  • flex-start(默许值):左对齐
  • flex-end:右对齐
  • center: 居中
  • space-between:两头对齐,项目之间的距离都持平。
  • space-around:每个项目两边的距离持平。所以,项目之间的距离比项目与边框的距离大一倍。

3.5 align-items特点

align-items特点界说项目在穿插轴上怎么对齐
 
  1. .box {
  2. align-items: flex-start | flex-end | center | baseline | stretch;
  3. }
  • flex-start:穿插轴的起点对齐。
  • flex-end:穿插轴的结尾对齐。
  • center:穿插轴的中点对齐。
  • baseline: 项目的榜首行文字的基线对齐。
  • stretch(默许值):假如项目未设置高度或设为auto,将占满整个容器的高度。

 

3.6 align-content特点
align-content特点界说了多根轴线的对齐办法。假如项目只要一根轴线,该特点不起作用。
 
  1. .box {
  2. align-content: flex-start | flex-end | center | space-between | space-around | stretch;
  3. }
  • flex-start:与穿插轴的起点对齐。
  • flex-end:与穿插轴的结尾对齐。
  • center:与穿插轴的中点对齐。
  • space-between:与穿插轴两头对齐,轴线之间的距离均匀散布。
  • space-around:每根轴线两边的距离都持平。所以,轴线之间的距离比轴线与边框的距离大一倍。
  • stretch(默许值):轴线占满整个穿插轴。

 

四、项目的特点
以下6个特点设置在项目上。
 
  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

4.1 order特点

order特点界说项目的摆放次序。数值越小,摆放越靠前,默许为0。

  1. .item {
  2. order: <integer>;
  3. }

 

4.2 flex-grow特点 flex-grow特点界说项目的扩大份额,默许为0,即假如存在剩下空间,也不扩大。

  1. .item {
  2. flex-grow: <number>; /* default 0 */
  3. }

假如一切项目的flex-grow特点都为1,则它们将等分剩下空间(假如有的话)。假如一个项目的flex-grow特点为2,其他项目都为1,则前者占有的剩下空间将比其他项多一倍。

4.3 flex-shrink特点

flex-shrink特点界说了项目的缩小份额,默许为1,即假如空间缺乏,该项目将缩小。

  1. .item {
  2. flex-shrink: <number>; /* default 1 */
  3. }


假如一切项目的flex-shrink特点都为1,当空间缺乏时,都将等份额缩小。假如一个项目的flex-shrink特点为0,其他项目都为1,则空间缺乏时,前者不缩小。
负值对该特点无效。

4.4 flex-basis特点

flex-basis特点界说了在分配剩余空间之前,项目占有的主轴空间(main size)。浏览器依据这个特点,核算主轴是否有剩余空间。它的默许值为auto,即项目的原本巨细。

  1. .item {
  2. flex-basis: <length> | auto; /* default auto */
  3. }



它能够设为跟width或height特点相同的值(比方350px),则项目将占有固定空间。

4.5 flex特点

flex特点是flex-grow, flex-shrink 和 flex-basis的简写,默许值为0 1 auto。后两个特点可选。

  1. .item {
  2. flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
  3. }



该特点有两个方便值:auto (1 1 auto) 和 none (0 0 auto)。
主张优先运用这个特点,而不是独自写三个别离的特点,由于浏览器会计算相关值。

4.6 align-self特点

align-self特点答应单个项目有与其他项目不相同的对齐办法,可掩盖align-items特点。默许值为auto,表明承继父元素的align-items特点,假如没有父元素,则等同于stretch。

  1. .item {
  2. align-self: auto | flex-start | flex-end | center | baseline | stretch;
  3. }


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

抢手文章引荐

请稍候...