zoukankan      html  css  js  c++  java
  • CSS3-弹性布局(flex)

    一、前言

    Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。

    它即可以应用于容器中,也可以应用于行内元素。Flex布局,可以简便、完整、响应式地实现各种页面布局。[只有横向伸缩,没有纵向伸缩的,但是可以纵向排版]

    二、flex简介

    采用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  定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

    (1) flex-direction

    .box {flex-direction: row | row-reverse | column | column-reverse;}
    属性可选值的范围为row(默认)沿水平主轴由左向右排列;row-reverse沿水平主轴由右向左排列;column沿垂直主轴右上到下和column-reverse。

    (2) flex-wrap

    .box{flex-wrap: nowrap | wrap | wrap-reverse;}
    属性可选值的范围为nowrap(默认)不换行、wrap换行(第一行在上方)和wrap-reverse

    (3) flex-flow

    .box {flex-flow: || ;}
    写法属性中,将上述两种方法的值用||连接即可

    (4) justify-content

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

    属性值 说明
    flex-start 项目以主轴左侧对齐
    flex-start 项目以主轴左侧对齐
    flex-end 项目以主轴右侧对齐
    center 项目以主轴中心居中对齐
    space-between 项目两端对齐,项目之间的间隔都相等
    space-around 项目两端对齐,每个项目两侧的间隔相等

    (5)align-items

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

    属性值 说明
    stretch 如果项目未设置高度或设为auto,将占满整个容器的高度
    flex-start 项目以交叉轴起点对齐
    flex-end 项目以交叉轴终点对齐
    center 项目以交叉轴的中点对齐
    baseline 项目以第一行文字的基线对齐

    (6)align-content

    align-content: stretch(默认值) | flex-start | flex-end | center | space-between | space-around;

    属性值 说明
    stretch 轴线占满整个交叉轴
    flex-start 以交叉轴起点对齐
    flex-end 以交叉轴的终点对齐
    center 以交叉轴的中点对齐
    space-between 以交叉轴两端对齐,轴线之间的间隔平均分布
    space-around 以交叉轴两端对齐,每根轴线两侧的间隔都相等

    四、项目的属性

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

    (1) order属性

    .item { order: ;}
    order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。

    (2) flex-grow属性

    flex-grow: <number>;
    flex-grow属性用于设置项目的放大比例(分配剩余空间)

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

    (3) flex-shrink属性

    flex-shrink: <number>;
    flex-shrink属性用于设置项目的缩小比例(处理溢出空间)

    • 默认值:1
    • 如果所有项目的flex-shrink属性都为1,则当空间不足时,都将等比例缩小。
    • 如果一个项目的flex-shrink属性为0,则空间不足时,该项目不缩小。

    (4) flex-basis属性

    flex-basis: auto | <length>;
    flex-basis属性定义了分配多余空间之前,项目占据的主轴空间

    • 默认值:auto
    • 浏览器根据这个属性,计算主轴是否有多余空间。
    • flex-basis属性设置固定值(例如:350px),则项目将占据固定空间。

    (5) flex属性

    flex: none | [ <flex-grow> <flex-shrink> || <flex-basis> ]
    flex 属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值:0 1 auto
    【如果设置了flex-basis属性值,flex-grow和flex-shink就失效了】

    (6) align-self属性

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

    参考文献:
    Flex 布局教程:语法篇 --http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

    Flex 布局教程:实例篇 --
    http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

  • 相关阅读:
    多测师讲解html _伪类选择器17_高级讲师肖sir
    多测师讲解html _后代选择器16_高级讲师肖sir
    多测师讲解html _组合选择器_高级讲师肖sir
    多测师讲解html _标签选择器14_高级讲师肖sir
    前端 HTML form表单标签 input标签 type属性 重置按钮 reset
    前端 HTML form表单标签 textarea标签 多行文本
    前端 HTML form表单标签 input标签 type属性 file 上传文件
    前端 HTML form表单标签 input标签 type属性 radio 单选框
    前端 HTML form表单标签 input标签 type属性 checkbox 多选框
    前端 HTML form表单目录
  • 原文地址:https://www.cnblogs.com/sunidol/p/11301427.html
Copyright © 2011-2022 走看看