美文网首页
css3样式之display:flex

css3样式之display:flex

作者: 姚小瘦 | 来源:发表于2019-01-23 16:42 被阅读0次

display:flex;

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

注意,设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效

一、flex容器的属性:

1.flex-direction:决定主轴的方向(即项目的排列方向)

.box{

      flex-direction: row | row-reverse | column | column-reverse;

}

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

.box

{

    flex-wrap: nowrap | wrap | wrap-reverse;

}

不换行/换行,第一行在上面/换行,第一行在下面

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

4.justify-content:定义了项目在主轴上的对齐方式

justify-content: flex-start | flex-end | center | space-between | space-around;

space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍

5.align-items:定义项目在交叉轴上如何对齐

align-items: flex-start | flex-end | center | baseline | stretch;

起点对齐/终点对齐/中点对齐/项目的第一行文字的基线对齐/如果项目未设置高度或设为auto,将占满整个容器的高度

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

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

二、项目的属性

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

1.order:定义项目的排列顺序。数值越小,排列越靠前,默认为0,可正可负的整数

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

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

3.flex-shrink:定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小;设为0时,不缩小;

4.flex-basis:定义了在分配多余空间之前,项目占据的主轴空间(main size)。

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

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

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

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

相关文章

  • CSS3-伸缩布局

    CSS3 样式 页面效果: 1、必要元素: a、指定一个盒子为伸缩盒子display: flex b、设置属性来调...

  • CSS3 display:flex和display:box有什么

    CSS3 display:flex和display:box有什么区别?display:box布局的详细介绍(图解)...

  • css3样式之display:flex

    display:flex; Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵...

  • flex

    display:flex 设置块级元素inline-flex 设置行内元素 弹性容器样式 flex-directi...

  • 用CSS实现垂直水平居中的方法整理

    html结构: 垂直水平居中 CSS样式: 方法1:display:flex .box2{display...

  • 弹性布局

    也是css3的内容,所以得加-webkit 把一个容器指定为flex布局, .box{ display:flex;...

  • flex布局

    给容器加 display:flex 样式 容器的属性: 1. flex-direction: row | row-...

  • Flex布局

    定义容器的display属性 容器样式 主轴方向(flex-direction) 换行(flex-wrap) 主轴...

  • display flex 弹性布局

    浅谈CSS3中display属性的Flex布局 https://www.cnblogs.com/xuyuntao/...

  • 那些经常使用的 CSS3属性

    实用的css3属性 1、display:flex||inline-flex 项目中的应用 我当时写过一个因为子元素...

网友评论

      本文标题:css3样式之display:flex

      本文链接:https://www.haomeiwen.com/subject/rsijjqtx.html