弹性盒模型布局

1、容器属性
display : flex
声明使用弹性盒布局

flex-direction : row | row-reverse | column | column-reverse
确定子元素排列的方向

flex-wrap : nowrap | wrap | wrap-reverse
元素超过父容器尺寸时是否换行

flex-flow : flex-direction | flex-wrap
同时设置flex-direction 和 flex-wrap

justify-content : flex-start | flex-end | center | space-between | space-around
子元素的尺寸确定之后，用此属性来设置flex-direction定义方向上的分布方式

align-items : flex-start | flex-end | center | baseline | stretch
子元素的尺寸确定之后，用此属性来设置flex-direction定义方向上的垂直方向的分布方式

align-content : flex-start | flex-end | center | space-between | space-around | stretch
设置多行子元素在行方向上的对齐方式

2、条目属性
flex : none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>
同时设置flex-grow 和 flex-shrink 以及 flex-basis

flex-grow ： number
表示的是当父元素有多余的空间时，这些空间在不同子元素之间的分配比例

flex-shrink： number
当父元素的空间不足时，各个子元素的尺寸缩小的比例

flex-basis ：length | percentage | auto | content
用来确定弹性条目的初始主轴尺寸。

align-self ：auto | flex-start | flex-end | center | baseline | stretch
覆写父元素指定的对齐方式

order : integer
改变条目在容器中的出现顺序 

  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport"
  6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <title>弹性盒模型布局---容器属性</title>
  9 
 10     <style type="text/css">
 11         ul{
 12             margin:0;
 13             padding:0;
 14             list-style:none;
 15             width:500px;
 16             height:500px;
 17             margin:50px auto 0;
 18             background-color:gold;
 19             border:5px solid #000;
 20 
 21             display:flex;
 22 
 23             /* flex-direction-----确定子元素排列的方向
 24             row: 默认子元素水平靠左排列
 25             row-reverse: 子元素靠右倒序排列
 26             column: 竖排
 27             column-reverse: 倒序竖排
 28             */
 29             flex-direction:row;
 30 
 31 
 32             /* flex-wrap-----元素超过父容器尺寸时是否换行
 33             nowrap: 默认值，子元素宽度超过父级宽度时不换行;
 34             wrap: 子元素宽度超过父级宽度时换行;
 35             wrap-reverse: 子元素宽度超过父级宽度时换行且倒序排列;
 36             */
 37             /*flex-wrap:nowrap; */
 38 
 39 
 40             /* flex-flow:column nowrap;  同时设置flex-direction 和 flex-wrap  */
 41 
 42 
 43             /* justify-content-----子元素的尺寸确定之后，用此属性来设置flex-direction定义方向上的分布方式
 44             flex-start: 整体子元素靠左;
 45             flext-end: 整体子元素靠右;
 46             center: 整体子元素居中；
 47             space-between: 第一个子元素靠左顶格，最后一个子元素靠右顶格，中间的元素等分间距;              *******用处很大
 48             space-around: 第一个子元素靠左的间距和最后一个子元素靠右的间距是中间子元素间距的一半，中间的元素等分间距。    *******用处很大
 49             */
 50             justify-content:space-around;
 51 
 52 
 53             /* align-items-----子元素的尺寸确定之后，用此属性来设置flex-direction定义方向上的垂直方向的分布方式
 54             flex-start: 整体垂直靠上排列;                 *******用处很大
 55             flext-end: 整体垂直靠下排列;                  *******用处很大
 56             center: 整体垂直居中排列;                     *******用处很大
 57             baseline: 子元素内的文字底部对齐，如果文字大小不同，会导致子元素水平不对齐;
 58             stretch: 如果子元素不设置高度，高度被拉伸到和父元素高度相同（除去自身的margin）。
 59             */
 60             align-items:stretch;
 61 
 62 
 63             /* align-content-----设置多行子元素在行方向上的对齐方式
 64             flex-start: 多行整体靠上排列;
 65             flext-end: 多行整体靠下排列;
 66             center: 多行整体垂直居中排列;
 67             space-between: 第一行子元素靠上顶格，最后一行子元素靠下顶格，中间行元素等分垂直的间距;
 68             space-around: 第一行子元素靠上的间距和最后一行子元素靠下的间距是中间行元素间距的一半，中间行的元素等分垂直间距。
 69             */
 70             flex-wrap:wrap;
 71             align-content:space-around;
 72 
 73         }
 74 
 75         li{
 76             width:100px;
 77             /* width:200px;*/
 78             /* width:50px; */
 79             height:50px;
 80             margin:10px;
 81             background-color:green;
 82             text-align:center;
 83             line-height:50px;
 84             color:#fff;
 85         }
 86 
 87         li:nth-child(2){
 88             font-size:40px;
 89         }
 90 
 91     </style>
 92 </head>
 93 <body>
 94 
 95 <ul>
 96     <li>1</li>
 97     <li>2</li>
 98     <li>3</li>
 99     <li>4</li>
100     <li>5</li>
101 
102     <li>6</li>
103     <li>7</li>
104     <li>8</li>
105     <li>9</li>
106     <li>10</li>
107 </ul>
108 </body>
109 </html>

 

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>弹性盒模型布局---条目属性</title>
 9 
10     <style type="text/css">
11         ul{
12             margin:0;
13             padding:0;
14             list-style:none;
15             width:500px;
16             height:500px;
17             margin:50px auto 0;
18             background-color:gold;
19             border:5px solid #000;
20 
21             display:flex;
22         }
23 
24         li{
25             /* width:100px;*/
26             width:50px;
27             height:50px;
28             margin:10px;
29             background-color:green;
30             text-align:center;
31             line-height:50px;
32             color:#fff;
33 
34             /*  每个子元素增长的宽度比例是：1
35             flex-grow:1;
36             */
37 
38             /*  每个子元素缩小的宽度比例是：1
39             flex-shrink:1;
40             */
41 
42         }
43 
44         li:nth-child(2){
45             /* flex-grow:3;   单独设置第二个元素的增长比例是：3 */
46             /* flex-shrink:1;  单独设置第二个元素的缩小比例是：3 */
47             /* flex-basis:20px;  单独设置第二个元素以20px宽度为基准增长 */
48             /* align-self:center;   单独设置和 “align-items” 不同的垂直对齐方式 */
49             order:1;   /* 改变条目在容器中的出现顺序*/
50         }
51 
52         li:nth-child(1){
53             order:2;
54         }
55         li:nth-child(3){
56             order:5;
57         }
58         li:nth-child(4){
59             order:3;
60         }
61         li:nth-child(5){
62             order:4;
63         }
64 
65         }
66 
67     </style>
68 </head>
69 <body>
70 
71 <ul>
72     <li>1</li>
73     <li>2</li>
74     <li>3</li>
75     <li>4</li>
76     <li>5</li>
77 </ul>
78 </body>
79 </html>

 

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>弹性盒模型-菜单</title>
 9 
10     <style type="text/css">
11         ul{
12             list-style:none;
13             padding:0;
14             margin:0;
15         }
16 
17         .menu_con{
18             width:960px;
19             height:80px;
20             background-color:#ddd;
21             margin:50px auto 0;
22 
23             display:flex;  /* 设置为容器属性*/
24         }
25 
26         .menu_con .logo{
27             width:80px;
28             height:80px;
29             background-color:red;
30         }
31 
32         .menu_con .menu{
33             width:80px;
34             height:80px;
35             /* background-color:pink; */
36             overflow:hidden;
37 
38             flex-grow:1;  /* 只有menu增长比例为1 */
39 
40             display:flex;  /* 设置为容器属性*/
41             align-items:center;  /* 整体垂直居中排列 */
42         }
43 
44         .menu li{
45             flex-grow:1;  /*menu下各li增长比例为1*/
46 
47             text-align:center;
48             border-right:1px solid #000;
49             margin-right:-1px;  /* 和overflow:hidden同时使用，为了隐藏最右边的border实线 */
50         }
51 
52         /*  将最后一个li的右边线设置为0，该方法也可隐藏最右边的border实线
53         .menu li:last-child{
54             border:0;
55         } */
56 
57         .menu li a{
58             text-decoration:none;
59             color:#666;
60         }
61 
62         @media (max-width:960px){    /* 响应式布局，当页面宽度小于960px时，menu_con的宽度即为页面宽度*/
63             .menu_con{
64                 width:100%;
65             }
66         }
67 
68     </style>
69 </head>
70 <body>
71 
72 <div class="menu_con">
73     <div class="logo"></div>
74     <ul class="menu">
75         <li><a href="">首页</a></li>
76         <li><a href="">公司简介</a></li>
77         <li><a href="">公司新闻</a></li>
78         <li><a href="">行业动态</a></li>
79         <li><a href="">联系我们</a></li>
80     </ul>
81 </div>
82 
83 </body>
84 </html>

posted on 2019-12-08 12:13  cherry_ning  阅读(129)  评论(0)    收藏  举报

导航