flex布局

栏目: Html · 发布时间: 5年前

内容简介：flex布局也叫弹性盒子，是由W3C提出的一种新的布局方式，目前兼容IE10+以上的浏览器，任何一个盒子包括行内元素都可以指定为Flex布局，只需要在它的父元素设置display:flex;即可父元素设置flex后，会成为flex容器（box），它的所有子元素默认称为容器成员（item），容器默认存在两根轴线，水平的主轴线和垂直的交叉轴线

flex布局也叫弹性盒子，是由W3C提出的一种新的布局方式，目前兼容IE10+以上的浏览器，任何一个盒子包括行内元素都可以指定为Flex布局，只需要在它的父元素设置display:flex;即可

.box{
  display:flex;
}

注意，在设置了flex布局以后，其所有的子元素的float，clear和vertical- align属性都将失效

父元素设置flex后，会成为flex容器（box），它的所有子元素默认称为容器成员（item），容器默认存在两根轴线，水平的主轴线和垂直的交叉轴线

flex布局

在父元素（box）设置flex后，会有6个属性

box

flex- direction

flex-wrap

flex-flow

justify- content

align-items

align-content

下面我们来依次分析这几个属性

fiex-direction

该属性决定主轴的方向，也就是项目的排列方向，它有4个参数， 主轴方向改变后交叉轴的方向也会改变

flex-direction:row;这个是默认值，默认主轴为水平方向，起点在左端
flex-direction:row-reverse;主轴为水平方向，起点在右端
flex-direction:column;主轴在垂直方向，起点在上端
fiex-direction:column-reverse;主轴在垂直方向，起点在下端

flex布局

flex-wrap

该属性决定子元素如果不在一条轴线上如何换行

nowrap:该属性是默认属性，不换行，如果我们设定的item大小在一行上回超出box，那么不会溢出也不会换行，而是item会变形，从而适配当前box
wrap:正常换行，在第一行正下方
wrap-reverse:在第一行正上方换行，第一行会默认从底部开始

flex布局

flex-flow

该属性是flex-direction和flex-wrap属性的简写，默认值是row nowrap;

.box{
  display:flex;
  flex-flow:row nowrap;
}

justify-content

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

flex-start：该属性是默认值，从左端对齐
flex-end：该属性规定从右端对齐
center：该属性规定居中对齐
space- between：该属性规定两端对齐，子元素之间的间隔都相等
space- around：该属性规定每个子元素的两侧的间隔相等，所以子元素之间的间隔比子元素与边框之间的间隔大一倍

flex布局

align-items

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

flex-start：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐
baseline：子元素的第一行文字的基线对齐
stretch：默认值，如果子元素未设置高度或auto，将占满整个父容器的高度

flex布局

align-content

定义了多根轴线的对齐方式，如果父元素只有一根轴线，该属性不起作用

flex-start：与交叉轴的起点对齐
flex-end：与交叉轴的终点对齐
cengter：与交叉轴的中点对齐
space- between：与交叉轴的两端对齐，轴线之间的间隔平均分布
space-around：每跟轴线之间的距离相等所以轴线之间的间隔比与边框线之间的间隔大一倍
st retch：默认值，轴线占满整个交叉线

item

在父元素设置了flex属性后，子元素会有以下6个属性

flex-grow
flex-shrink
flex- basis
flex
aligr-self

以下面的代码为例，我们来依次了解这些属性

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        div {
               display: flex;
               width: 100%;
               height: 300px;
           }

        div span {
            flex: 1;
            border: 1px solid #000;
            border-radius: 100%;
            margin-right: 30px;
            text-align: center;
            line-height: 300px;
            font-size: 25px;
        }
    </style>
    <title>flex</title>
</head>
<body>
<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>
</body>
</html>

order

该属性定义项目的排列顺序，数值越小，排列越靠前，默认为0

div span:nth-of-type(2) {
    order: 1;
}

div span:nth-of-type(1) {
    order: 2;
}

flex布局

flex-grow

该属性定义项目的放大比例，默认为0，即使存在剩余空间，也不放大，如果所有子元素都设置该属性为1，那么他们将会等分剩余的空间，如果一个其中一个子元素的flex-grow属性设置为2，那么它将会比其他的子元素多一倍

div span:nth-of-type(1) {
            flex-grow: 2;
        }

flex布局

flex-shrink

该属性定义了项目的缩小比例，默认为1，也就是说，如果空间不足，该项目将会缩小，如果所有项目的缩小比例都为1，那么如果空间不足，所有项目都将会等比例缩小，如果其中一个设置为0，那么在空间不足的情况下，其它项目会缩小，该项目不会缩小，该属性设置负值无效

flex- basis

属性定义在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余的空间，它的默认值为auto，即项目本来的大小，该属性可以设置和width或length属性一样的值，那么项目将占据固定的空间

flex

该属性是flex- grow，flex-shrink和flex- basis的简写，默认值为0 1 auto，后两个属性可选

align-self

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

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

flex布局

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

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

组合数学

Richard A.Brualdi / 机械工业出版社 / 2009-3 / 49.00元

《组合数学(英文版)(第5版)》英文影印版由Pearson Education Asia Ltd．授权机械工业出版社独家出版。未经出版者书面许可，不得以任何方式复制或抄袭奉巾内容。仅限于中华人民共和国境内(不包括中国香港、澳门特别行政区和中同台湾地区)销售发行。《组合数学(英文版)(第5版)》封面贴有Pearson Education(培生教育出版集团)激光防伪标签，无标签者不得销售。Englis......一起来看看《组合数学》这本书的介绍吧!

码农工具

CSS 压缩/解压工具

在线压缩/解压 CSS 代码

XML、JSON 在线转换

在线XML、JSON转换工具