02-CSS基础与进阶-day13_2018-09-21-21-13-20

weixin_30734435

于 2019-06-24 23:25:00 发布

阅读量85

点赞数

原文链接：http://www.cnblogs.com/HiJackykun/p/11080207.html

版权

伸缩布局
传统的三等份

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>

转载于:https://www.cnblogs.com/HiJackykun/p/11080207.html

weixin_30734435

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
02-CSS基础与进阶-day13_2018-09-21-21-13-20

伸缩布局传统的三等份 flex-direction 调整主轴方向 flex-direction: row 默认水平从左到右 flex-direction: row-reverse; flex-direction: column; flex-direction: column-reverse; justify-conten...
复制链接

扫一扫