布局display属性(一)--【Flex】

一、Flex 布局是什么?

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

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


.box{
  display: flex;
}

行内元素也可以使用 Flex 布局。


.box{
  display: inline-flex;
}

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


.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

注意,设为 Flex 布局以后,子元素的floatclearvertical-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个属性设置在容器上。

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

3.1 flex-direction属性

flex-direction属性决定主轴的方向(即项目的排列方向)。


.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

它可能有4个值。

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

3.2 flex-wrap属性

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


.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

它可能取三个值。

(1)nowrap(默认):不换行。

(2)wrap:换行,第一行在上方。

(3)wrap-reverse:换行,第一行在下方。

3.3 flex-flow

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


.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

3.4 justify-content属性

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


.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

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

3.5 align-items属性

align-items属性定义项目在交叉轴上如何对齐。


.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。

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

3.6 align-content属性

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


.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

该属性可能取6个值。

  • 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。


.item {
  order: <integer>;
}

4.2 flex-grow属性

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


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

如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

4.3 flex-shrink属性

flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。


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

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

负值对该属性无效。

4.4 flex-basis属性

flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。


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

它可以设为跟widthheight属性一样的值(比如350px),则项目将占据固定空间。

4.5 flex属性

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


.item {
  flex: none | [ <‘flex-grow‘> <‘flex-shrink‘>? || <‘flex-basis‘> ]
}

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

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

4.6 align-self属性

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


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

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

时间: 2024-10-25 08:39:26

布局display属性(一)--【Flex】的相关文章

CSS3弹性伸缩布局(二)——flex布局

上一篇博客<CSS3弹性伸缩布局(一)——box布局>介绍了旧版本的box布局,而这篇博客将主要介绍最新版本的flex布局的基础知识. 新版本简介 新版本的Flexbox模型是2012年9月提出的工作草案,这个草案是由W3C 推出的最新语法.这个版本立志于指定标准,让新式的浏览器全面兼容,在未来浏览器的更新换代中实现统一. 这里我们还是继续上一篇博客中的例子,使用最新版本的flex布局来实现相同的效果. html代码: <div> <p>发生过的空间还是看价格哈健康啊水

flex布局justify-content属性和align-items属性设置

前言: flex最常用的就是justify-content和align-items了,这里把这两个属性介绍下,大家更多关于flex布局可以查看阮一峰的日志,写的非常清楚! 阮一峰flex布局的日志:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 1.justify-content(在父元素设置)     设置弹性盒子元素在主轴(横轴)的对齐方式. 取值: justify-content: flex-start | flex-end

CSS定位布局display/float/position属性之间的关系/区别和如何使用取值行为机制

float: left|right; 可以自动排列自动折行, 但需要clear来配合清除浮动;display: inline-block; 有些时候可以替代float实现相同的效果.position: absolute|relative; 要配合top,left等定位; position: absolute会导致元素脱离文档流,被定位的元素等于在文档中不占据任何位置,在另一个层呈现,可以设置z-index.PS的图层效果就是position: absolute. float也会导致元素脱离文档流

深入理解和应用display属性(二)

四.inline-block 此类元素是inline + block的合体 1) margin和padding都有效:width和height都有效: .inline{ display: inline-block; width: 200px; background: red; margin: 10px; padding: 10px; } <div class="inline"><a>inline01</a></div> <div c

css Table布局-display:table

使用表格布局一直是一个敏感的主题.一般情况下,Web开发人员考虑基于表格布局是禁忌.尽管反对的理由看起来证据很充分,但是大多数开发者除了谴责基于表格的布局,都无法提供完善的使用场景."表格不好." 从早期反对HTML Table(<table>标签)开始这种势头就非常强劲.几代开发者被成功洗脑,根深蒂固的认为:任何使用表格都是邪恶的. 诚然,我也是避免使用表格布局的开发者之一,即使是显示表格数据. 我甚至曾经斥责我的下属开发者同事,当他们使用 display:table 用

CSS3弹性伸缩布局(下)——flex布局

新版本 新版本的flex布局模型是2012年9月提出的工作草案,这个草案是由W3C推出的最新语法,这个版本立志于指定标准,让新式的浏览器全面兼容,在未来的浏览器更新换代中实现统一. 目前几乎大部分的浏览器都支持了.浏览器支持情况可以点击这里查看,下图为支持flex的情况 //HTML代码部分<div> <p>我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林</p> <p>我是吴广林我是吴

如何理解CSS的display属性

在布局中, display 属性是最重要的CSS属性之一.其最常见的属性值有 block , inline , none , table 以及 inline-block .最近的新宠为 flex ,因为它是专门为布局创建的 display 属性.新出现的 grid (最近仍比较活跃)是另外一个指定的布局属性,其很快就会广泛被使用. 这篇文章比我预期的要长很多,你可以选择性进行阅读,但是我更希望你可以静下心来阅读整篇文章. 表内容 通过创建各种响应式设计,对于 display 以及 positio

弹性布局的属性

目录 弹性布局的属性 属性及作用 1. display:flex; 弹性布局,父级 2. flex-deriction 方向,父级 3. flex-wrap 换行,父级 4. justify-content 水平对齐方式,写在父级 5. align-items 垂直对齐方式,写在父级 6. align-content 垂直对齐方式,用于修改 flex-wrap 属性的行为(如果不换行,则无效),写在父级 7. align-self 垂直对齐方式,写在子级 8. order 排序,子级 9. fl

web前端入门到实战:CSS Display属性的双值写法

display属性 display 属性用来控制一个元素及其子元素的 格式化上下文, 你应该在刚刚学习CSS的时候就知道,有些元素是块级元素,有些则是行内元素. 有了 display 属性,你就可以切换元素不同的状态.比如说,通常一个 h1 元素是一个块级元素,但是通过切换,它就能以内联元素展现. 这几年,我们也知道了Grid 布局和弹性盒布局.我们只需要将 display 属性的值设置为 display: grid 或 display: flex 就可以实现这两种布局.当 display 属性