实例演示flex常用的6个属性

概述

place：位置
content：内容
place-content：内容位置
属性有：start、end、center、space-between、space-around、space-evenly
start、end、center：这三个可以开着是内容开始的地方
start：主轴开始的地方
end：主轴结束的地方
center：主轴中间位置
space-between、space-around、space-evenly这三个可以看成剩余空间分配的地方
**容器上的元素：**
转成flex容器display：flex；
容器内的项目在剩余空间的位置place-content:start、end、center、space-between、space-around、space-evenly
容器内的项目在主轴的显示方向flex-direction：row，column；
容器内的项目是否允许换行flex-wrap：wrap/nowrap
控制容器内的项目所在位置place-items：start，end，center
**项目上的元素：**
flex（控制项目自适应，放大，缩小，宽度），order（控制项目排序），place-self（控制项目自身）

1、flex的排列属性：row 和 column

css样式演示

body .sap{
    display: flex;
    width: 800px;
    height: 500px;
    background-color: rgb(214, 132, 132);
    place-content: center;
    flex-direction: row;
    flex-direction: column;
}
body .sap .item{
    width: 50px;
    height: 100px;
    background-color: blueviolet;
    color: aliceblue;
    margin: 0 10px;
}

2、flex-wrap换行属性，默认nowrap不换行，换行wrap

.sap{
    display: flex;
background: #000;
flex-direction: column;
flex-direction: row;
flex-direction: ;
flex-wrap: wrap;
flex-flow: row nowrap;
flex-flow: row wrap;
}

3、place-content空间分配

/*居中分配*/
place-content: center;
/*左侧分配*/
place-content: start;
/*右侧分配*/
place-content: flex-end;
/*两端分配*/
place-content:space-between;
/*分散分配*/
place-content:space-around;
/*平均分配*/
place-content:space-evenly;

html显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex容器布局策略与思路及其属性验证</title>
</head>
<body>
<div class="nav">
    <a href="">内容悬浮1</a>
    <a href="">内容悬浮2</a>
    <a href="">内容悬浮3</a>
    <a href="">内容悬浮4</a>
</div>
<style>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body .nav{
    height: 300px;
    background-color: aquamarine;
    display: flex;
    flex-direction: column;
    flex-direction: row;
    place-content: center;
    place-content: space-between;
    place-content: space-around;
    place-content: space-evenly;
    place-content: end;
}
.nav > a{
    width: 100px;
    background-color: blueviolet;
    border: 1px solid #f00;
    flex: 0 0 auto;
    place-items: center;
    place-items: flex-end; 
    flex: auto;
    flex: 0 1 auto;
    flex: 1 1 auto;
    flex: 0 0 120px;
}
.nav > a:nth-of-type(1){
    order: 3;
    place-self: flex-end;
}
</style>
</body>
</html>

实例演示flex常用的6个属性

实例演示flex常用的6个属性

概述

1、flex的排列属性：row 和 column

css样式演示

2、flex-wrap换行属性，默认nowrap不换行，换行wrap

3、place-content空间分配

相关文章