伸缩布局
传统的三等份

flex-direction 调整主轴方向
flex-direction: row 默认 水平从左到右
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
justify-content 调整主轴对齐
justify-content: flex-start;
默认值 表示让子元素从父容器的开头开始排序
justify-content: flex-end;
表示让子元素从父容器的后面开始排序但盒子顺序不变
justify-content: center;
表示让子元素在父容器中间显示
justify-content: space-between;
左右盒子贴近父盒子 中间的均分空白间距
justify-content: space-around;
相当于给每个盒子添加左右margin
align-items 调整侧轴对齐(垂直对齐) 对一行的情况排列
align-items: stretch; /*默认 子元素高度会拉伸适应父容器(子元素没有设置高度前提下)*/
align-items: center; /*垂直居中*/
align-items: flex-start;/*上对齐*/
align-items: flex-end;/*下对齐*/
flex-wrap 控制是否换行
flex-wrap: nowrap; 默认值 项目不拆行不拆列 收缩显示 一行内显示
flex-wrap: wrap; 项目必要时候拆行或拆列
flex-wrap: wrap-reverse; 项目必要时候拆行或拆列,但是相反的顺序
flex-flow flex-direction和flex-wrap的简写
flex-flow:flex-direction flex-wrap
排列方向 换不换行
order 控制子元素的排列顺序
order值越小越排在前面 值可以为负数 默认值为0
align-content
必须父元素设置 display: flex flex-direction: row
flex-wrap: wrap
其值可以设置 stretch center flex-start
flex-end space-between space-around

 

06伸缩布局的排列方式.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
       section {
             width: 80%; 
             height: 200px;
             margin: 100px auto;
             border: 1px solid #ccc;
             /*父盒子添加flex*/
             display: flex; /*伸缩布局模式 这个盒子具有弹性*/
             min-width: 500px;
             flex-direction: row-reverse;
             flex-direction: column-reverse;
       }

       section div{
         
       }

       div:nth-child(1) {
             background-color: pink;
             width: 200px;
       }

       div:nth-child(2) {
             background-color: red;
             width: 100px;
             margin: 0 6px;
       }

       div:nth-child(3) {
             background-color: blue;
             flex: 1;
       }

       div:nth-child(4) {
             background-color: green;
             flex: 1;
       }
    </style>
</head>
<body>
    <section>
        <div>111</div>
        <div>222</div>
        <div>3333</div>
        <div>4444</div>
    </section>
</body>
</html>

07justify-content属性.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
       section {
             width: 80%; 
             height: 200px;
             margin: 100px auto;
             border: 1px solid #ccc;
             /*父盒子添加flex*/
             display: flex; /*伸缩布局模式 这个盒子具有弹性*/
             min-width: 500px;
             justify-content: flex-start;
             justify-content: flex-end; 
             justify-content: center;
             justify-content: space-between;
             justify-content: space-around;
       }

       section div{
           width: 200px;
       }

       div:nth-child(1) {
             background-color: pink;  
       }

       div:nth-child(2) {
             background-color: red;
             margin: 0 6px;
       }

       div:nth-child(3) {
             background-color: blue;
             
       }

       
    </style>
</head>
<body>
    <section>
        <div>111</div>
        <div>222</div>
        <div>3333</div>
    </section>
</body>
</html>

08align-items属性详解.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
       section {
             width: 80%; 
             height: 600px;
             margin: 100px auto;
             border: 1px solid #ccc;
             /*父盒子添加flex*/
             display: flex; /*伸缩布局模式 这个盒子具有弹性*/
             min-width: 500px;
             align-items: stretch; /*默认 子元素高度会拉伸适应父容器(子元素没有设置高度前提下)*/
             align-items: center; /*垂直居中*/
             align-items: flex-start;/*上对齐*/
             align-items: flex-end;/*下对齐*/
       }

       section div{
           width: 200px;
           height: 200px;
       }

       div:nth-child(1) {
             background-color: pink;  
       }

       div:nth-child(2) {
             background-color: red;
             margin: 0 6px;
       }

       div:nth-child(3) {
             background-color: blue;
             
       }

       
    </style>
</head>
<body>
    <section>
        <div>111</div>
        <div>222</div>
        <div>3333</div>
    </section>
</body>
</html>

09flex-wrap属性.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
       section {
             width: 80%; 
             height: 600px;
             margin: 100px auto;
             border: 1px solid #ccc;
             /*父盒子添加flex*/
             display: flex; /*伸缩布局模式 这个盒子具有弹性*/
             min-width: 500px;
             flex-wrap: nowrap;
             flex-wrap: wrap-reverse;
             flex-wrap: wrap;
             align-content: space-between;
       }

       section div{
           width: 500px;
           height: 200px;
       }

       div:nth-child(1) {
             background-color: pink;  
       }

       div:nth-child(2) {
             background-color: red;
             margin: 0 6px;
       }

       div:nth-child(3) {
             background-color: blue;
             
       }

       
    </style>
</head>
<body>
    <section>
        <div>111</div>
        <div>222</div>
        <div>3333</div>
    </section>
</body>
</html>

 

posted on 2019-06-24 23:25  HiJackykun  阅读(116)  评论(0编辑  收藏  举报