CSS3 弹性布局

html-css019

CSS3 弹性布局,第1张

flex 是 flexible box 的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性。能够高效方便的控制元素的对齐、排列,自动计算布局内元素的尺寸,无论元素的尺寸是固定的还是动态的,控制元素在页面的布局方向。

弹性盒子由弹性容器(flex container)和弹性子元素(flex item)组成。

弹性容器设置属性 display:flex

一、容器属性

flex-flow 复合属性,是 flex-direction 和 flex-wrap 的简写形式。 默认值:flex-flow: row nowrap

⑴ flex-direction 子元素排列方向

flex-direction: row从左到右

flex-direction: row-reverse从右到左

flex-direction: column从上到下

flex-direction: column-reverse从下到上

⑵ flex-wrap 子元素换行方式

flex-wrap: nowrap不换行

flex-wrap:wrap换行

flex-wrap: wrap-reverse反转 wrap 排列,行颠倒

2 justify-content 子元素沿主轴对齐方式

justify-content: flex-start

justify-content: space-between

3 align-items 子元素在交叉轴上对齐方式

align-items: center垂直方向居中

align-items:flex-start垂直方向的顶部/交叉轴的起点对齐

align-items: flex-end垂直方向的底部/交叉轴的终点对齐

align-items: baseline项目的第一行的文字的基线对齐

align-items: stretch默认值,如果项目未设置高度或设为auto,将占满整个容器的高度

二、子元素属性(写在子元素下)

align-self 用于设置弹性子元素自身在侧轴(纵轴)方向上的对齐方式。允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。

align-items: center

align-items: flex-start

align-items: flex-end

align-items: baseline

align-items: stretch

order 定义子元素的排列顺序。数值越小,排列越靠前,默认为order: 0,可以为负值。

flex-grow 定义子元素的扩展比率,主要作用:分配剩余空间。负值无效。

flex-grow: 0默认值,即如果存在剩余空间,也不放大。

flex-grow: 1如果存在剩余空间,放大 ,等分剩余空间。

flex-shrink 定义子元素的收缩比率,值越大,按比例缩的就越小。

flex-shrink: 1默认值,即如果空间不足,缩小。

flex-shrink: 0不缩小。

flex-basis 定义元素的默认基准值。

设置了flex-basis,width就不起作用;同时存在的时候,优先使用flex-basis。

如果容器的宽度太小,子元素排列不下,设置的flex-basis的宽度会自动缩小,直到占满容器。

链接:https://juejin.cn/post/7038088241437736991

前端应知应会:flex布局详解

flex布局可以说是当下前端开发必须学会的一个基本技能,它在面试中的出场率也很高,有必要专门讲解一下。

flex布局全称flexible box布局模型,是一种比较高效的css3布局方案

通过设置元素的display属性,改成flex属性

来指定对应容器为flex布局。然后它的所有子元素自动成为了容器元素,不脱离文档流的情况下按照flex item的默认布局规则排列。

首先看下容器的属性:

1、flex-direction

决定主轴的方向,

默认值是row即横向从左往右的顺序进行排列。

其他选项值还有row-reverse、column、column-reverse

2、flex-wrap

它决定了如果轴线排列不下去的话,如何进行换行

默认是不进行换行,继续沿着主轴方向放置。

其它选项还有:wrap(换行)、wrap-reverse(换行、但是位置跟wrap相反)

3、flex-flow

它是flex-firection和flex-wrap的简写

4、justify-content

该属性定义了item在主轴上的对齐方式

默认值是:flex-start即顺着主轴方向排列对齐

其他还有flex-end:逆着主轴方向并从最远处往主轴起点排列

center:居中

space-between:两端对齐,项目之间间隔相等

space-around:每个项目两侧留白距离相等

5、align-items

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

毕竟,每个item的高度不一定完全一样。

它的默认值是stretch:即如果item没有设置高度或者是auto,则会占据整个容器的高度

其他还有flex-start、flex-end、center、baseline

6、align-content

它跟align-items的区别就是,该属性定义的是多跟轴线的对齐方式

该参数有六个可选项:

flex-start、flex-end、center、space-between、space-around、stretch

这里面要记得的是处于不同轴线上的item不会遮挡,即如果某个轴线上有两个不同高度的item,那么下一个轴线的位置会按照上一条轴线上高度最高的item进行计算。

针对item,也有一些属性可以设置

1、order决定了项目的排列顺序,可以通过设置该属性将对应的item往前排列

2、flex-grow,决定了item的放大比例,默认为0不进行放大。

3、flex-shrink,定义了item的缩小比例,默认为1,如果空间不够的话所有轴线上的item将进行同比缩小,如果为0则该item不进行缩小

4、flex-basis,定义item在轴线上占据的宽度,如果没设置的话,就按item自身的宽度进行分配

5、align-self。定义item在轴线纵向的排列方式,可以替换掉对应flex容器的align-items属性,为该item设置专门的对齐方式

下面再举个例子

<!DOCTYPE html>

<html lang="en">

什么是flex布局?

传统的布局方案是基于盒模型,依赖于display:block和float+position,但是对于一些特殊的布局来说就不是很方便,如在盒模型中垂直居中。

2009年W3C提出一种新的布局方案,flex弹性盒布局,目前兼容的浏览器有chrome opera IE Firefox Sifari 

flex兼容浏览器版本

但是在未来flex布局将会成为布局的首选方案。

flex是flexinle BOX的缩写。意思是弹性布局,用来为盒模型提供最大的灵活性。    任何一个容器(标签)都可以指定为flex布局。用display:flex;

如果给容器设置flex的时候当前容器内子元素的float,clear,vericla-align都将会失效

flex的基本概念

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

如果给一个元素设置为flex后,这个元素就会作为子元素的flex容器。通过给容器设置属性来改变里面子元素的位置。

首先要给父元素添加display:flex;将父元素转化为弹性盒

2.用flex-direction来改变盒子里元素的位置

row 默认在一行内排列(从左向右)

row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面。)

column :纵向排列。

column-reverse:反转纵向排列,从下往上排,最后一项排在最上面

3.内容对齐(justify-content)属性应用在 弹性容器 上,把弹性项沿着弹性容器的主轴线(main axis)对齐

justify-content:flex-start 默认,左对齐(图1)

justify-content:flex-end 右对齐(图2)

justify-content:center 居中对齐(图3)

justify-content:space-between 两端对齐,中间自动分配

justify-content:space-around 自动分配距离

主轴对齐方式

4.align-items(交叉轴对齐方式)

flex-start:顶端对齐

flex-end:底对齐

center:垂直居中对齐

baseline:项目内文本的底线对齐

stretch  默认值    项目的高度自适应容器(注:子元素不能设置高)

交叉轴对齐方式

5.flex-wrap

该属性控制flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。

  nowrap:flex容器为单行。该情况下flex子项可能会溢出容器

  wrap:flex容器为多行。该情况下flex子项溢出的部分会被放置到新行,子项内部会发生断行

  wrap-reverse:反转 wrap 排列。

图1(nowrap)注意如果父元素盒设置宽度会自动缩子元素容器宽度

图2(wrap)

图3(warp-reverse)

容器单行或者多行方式

 6、align-content(行与行之间对齐方式)

当伸缩容器的侧轴还有多余空间时,本属性可以用来调整「伸缩行」在伸缩容器里的对齐方式,这与调整伸缩项目在主轴上对齐方式的 <‘ justify-content’>属性类似。 注:本属性在只有一行的伸缩容器上没有效果。

flex-start没有行间距

flex-end底对齐没有行间距

center居中没有行间距

space-between两端对齐,中间自动分配

space-around自动分配距离