html/css基础之flex(弹性布局)_html的flex弹性布局 csdn

以下文章主要探讨 HTML5 中 CSS3 提供的用来实现未来响应式弹性伸缩布局方案。

一、flex布局的语法

块级元素 ：display: flex ———— 将容器盒模型作为块级弹性伸缩盒显示

行内元素 ：display: inline-flex ———— 将容器盒模型作为内联级弹性伸缩盒显示

设置flex布局后，flex item的float、clear和vertical-align 属性都失效

flex布局默认为横向

css

<style>
        .flex-box{
            width: 1000px;
            height: 500px;
            margin: 0 auto;
            border: solid 1px red;
            display: flex;
        }
        .flex{
            width: 150px;
            height: 150px;
            background: blue;
            border: solid 1px rgb(255, 208, 0);
        }
</style>

html

<div class="flex-box">
        <div class="flex">第一个div</div>
        <div class="flex">第二个div</div>
        <div class="flex">第三个div</div>
        <div class="flex">第四个div</div>
</div>

 加了"display:flex;"布局默认为横向

 

二、容器属性

flex的排列属性：

1，加了"display:flex;flex-direction:column;"布局从上往下排列

2，加了"display:flex;flex-direction:column-reverse;"布局从上往下排列 

3，加了"display:flex;flex-direction:row;"布局从左到右排列

 4，加了"display:flex;flex-direction:row-reverse;"设置从右到左排列

flex换行属性：

没有设置子级flex为1时：flex-wrap

没有设置高度时会均分父级

 1，当  flex-wrap: nowrap  时 ———— 默认值，都在一行或一列显示： 

  2，当  flex-wrap：wrap   时  ————伸缩项目无法容纳时，自动换行 ：

  3，当  flex-wrap：wrap-reverse  时 ———— 伸缩项目无法容纳时，自动换行，方向和 wrap 相反 ：

伸缩属性：

 1，当  justify-content：flex-start  时  ————伸缩项目以起始点靠齐 ：

2，当  justify-content：flex-end  时  ———— 伸缩项目以结束点靠齐 ：

3， 当  justify-content：center  时  ———— 伸缩项目以中心点靠齐 ：

4，当  justify-content：space-between  时 ———— 伸缩项目平均分布 ：

5，当  justify-content：space-around  时 ——— 伸缩项目平均分布，但两端保留一半的空间 ：

  align-items属性：  ————  处理伸缩项目容器的额外空间

align-items属性的使用效果