Rumah  >  Artikel  >  hujung hadapan web  >  弹性布局是什么?弹性布局flex的基本应用(附代码)

弹性布局是什么?弹性布局flex的基本应用(附代码)

不言
不言asal
2018-08-01 14:55:104433semak imbas

弹性布局是什么?弹性布局(flex),顾名思义是一种布局方法,现如今,基本所有的浏览器都已经支持弹性布局。那么,接下来本文所给大家分享的就是弹性布局flex的基本应用。

如何应用弹性布局,代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            border: 1px solid #ccc;
            box-sizing: border-box;
        }
        .box{
            height:20vh;            
            display: flex;          
        }
        .box div{           
            flex: 1; 
        }
        .box div:last-child{
            flex: 2;
        }
    </style>
</head>
<body>
    <div>
        <div>Document1</div>
        <div>Document2</div>
        <div>Document3</div>
        <div>Document4</div>
        <div>Document5</div>
    </div>    
</body>
</html>

运行结果如下:

2345截图20180801144649.png

容器的设置

flex有6个属性可以设置:

flex-direction:row(主轴由左向右,默认) / row-reverse(主轴由右向左) / column (主轴由上向下)/ column-reverse (主轴由下向上)  决定主轴的方向

flex-wrap:nowrap(默认,不换行) / wrap(换行) / wrap-reverse(换行,第一行在下方) 决定项目在一条轴线上排不下时的换行方式

flex-flow:是上面两个属性的简写模式 默认值:flex-flow:row nowrap。

justify-content:flex-start(默认值,左对齐) / flex-end(右对齐) / center(居中) / space-between(两端对齐,项目之间的间隔相等) /
space-around(每个项目之间的间隔相等,所以项目之间的间隔比项目与边框之间的价格大一倍); 决定项目在主轴上的对齐方式。space-between/around在自适应调节间距时很有用

align-items:flex-start(交叉轴的起点对齐) / flex-end(交叉轴的终点对齐) / center(交叉轴的中点对齐) / baseline(项目的第一行文字的基线对齐)/stretch(默认值,若项目未设置高度或设置为auto,项目将占满这整个容器的高度)。 定义项目在交叉轴上的对齐方式

align-content:flex-start(与交叉轴的起点对齐) / flex-end(与交叉轴的终点对齐) / center(与交叉轴的中点对齐) /
space-between(与交叉轴的两端对齐,轴线之间的间隔平均分布) /space-around(每跟轴线两侧的间隔都相等,所以,轴线之间的间隔比轴线与边框的间隔大一倍)
/ stretch(默认值,轴线占满整个交叉轴)。定义多根轴线的对齐方式,如果项目自有一根轴线,该属性不起作用

项目的属性设置

order:定义项目的排列顺序,数字越小,排列越靠前,默认为0.

flex-grow:定义项目的放大比例,默认为0,默认情况下即使有剩余空间项目也不会放大。缩放的方向为flex-direction的方向。

flex-shrink:定义项目的缩小比例,默认为1,空间不足时,该项目会缩小。其值为0表示不缩小.缩放的方向为flex-direction的方向。

flex-basis:定义了在分配多余空间之前,项目占据的主轴空间(main size),浏览器根据这个属性没计算主轴是否有多余空间,默认值为 auto,即项目的本来大小。flex-basis:80px;宽度(方向为row)设置为80px;

flex:是上面三个属性的简写,默认值为 0 1 auto.有两个快捷值:auto(1 1 auto)和none(0 0 auto)

align-self:该属性允许耽搁项目与其他项目不同的对齐方式,课覆盖align-items的属性值。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则为stretch。

align-self:auto / flex-start / flex-end / center /baseline /stretch flex-basis:值为0与auto(默认)时的区别:前者没有将整个项目进行计算,而后者则是忽略内容进行算的,所以如果布局是需要的是每个项目的百分比配置,则应当将flex-basis设置为0.

相关推荐:

HTML中弹性布局(Flex)的介绍(附代码)

Atas ialah kandungan terperinci 弹性布局是什么?弹性布局flex的基本应用(附代码). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn