CSS学习（十九）-CSS伸缩布局盒

最新推荐文章于 2024-07-16 09:10:34 发布
最新推荐文章于 2024-07-16 09:10:34 发布
阅读量275 收藏 1
点赞数

版权声明：本博客原创文章欢迎转载，请转载的朋友最好注明出处，谢谢大家。

一、理论：
1.flexbox模型基础知识
a.flexbox布局方向不可预知
b.屏幕和浏览器窗口大小发生改变可以灵活调整布局
c.指定伸缩项目可以按主轴或者侧轴按比例分配额外空间
d.指定伸缩项目沿主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间
e.指定如何将垂直元素布局轴的额外空间分布到该元素周围
f.控制元素在页面上的布局方向
g.按照不同于DOM所指定的方式对屏幕上的元素重新排序
2.flexbox模型术语
a.主轴和侧轴　伸缩项目主要沿着这条轴布局，方向取决于justify-content属于　其值若为column为纵向　否则为横向
b.主轴起点、主轴终点：伸缩项目自主轴起点开始，至主轴终点结束
c.侧轴、侧轴方向：与主轴垂直的称作侧轴，侧轴是侧轴方向的延伸
d.侧轴起点、侧轴终点：伸缩项目的侧面内容由侧轴起点起，至侧轴终点止
e.侧轴长度、侧轴长度属性：由哪一个方向对着侧轴决定，是width或hegiht属性
3.伸缩容器、伸缩项目：
a.通过display属性显式地给一个元素设置为flex或inline-flex，即把容器变作伸缩容器
4.伸缩容器的属性：
a.伸缩流方向：flex-direction（默认为行）
b.伸缩行换行：默认为nowrap
c.伸缩方向与换行：定义伸缩容器的主轴与侧轴
d.主轴对齐：设置伸缩容器当前行伸缩项目在主轴方向的对齐方式，指定如何在伸缩项目之间分布伸缩容器的额外空间
e.堆栈伸缩行：控制伸缩项目在布局轴的堆放方式
5.伸缩项目的属性：
a.显示顺序 改变dom文档的先后顺序，通过此属性对项目进行排序组合
b.侧轴对齐
1)align-items 设置伸缩容器中包括匿名伸缩项目的所有项目的对齐方式
2)align-self
用来在单独的伸缩项目上覆写默认的对齐方式
3)伸缩性 定义伸缩项目可改变它们的宽度或高度填补可用的空间
6.伸缩行
a.flex-wrap 每个伸缩行至少包含一个伸缩项目
7.伸缩容器设置 display
a.box 设置为块伸缩容器
b.inline-fox 设置为内联级伸缩容器
c.horizontal 伸缩项目在伸缩容器中从左到右在一条水平线上排列显示
d.vertical 伸缩项目在伸缩项目中从上到下在一条垂直线上排列显示
e.inline-axis 伸缩项目沿着内联轴排列显示
f.block-axis 伸缩项目沿着块轴排列显示
8.布局顺序
a.box-direction 
1)normal 正常显示
2)reverse 反向显示
9.伸缩换行 box-lines
1)single 伸缩容器的所有伸缩项目一行或一列显示
2)multiple 指定伸缩容器多行或多列显示伸缩项目
10.主轴对齐 box-pack
a.start 伸缩项目向一行的起始位置靠齐
b.end 伸缩项目向一行的结束位置靠齐
c.center 伸缩项目向中间位置靠齐
d.justify 伸缩项目会平均分布在一行里
11.侧轴对齐 box-align
a.start 伸缩项目顶部边缘放置在伸缩容器的顶端,伸缩容器
b.end 与start值相反，所有伸缩项目底部边缘放置在伸缩容器底端，伸缩容器额外空间放置在伸缩项目底部
c.center 伸缩项目紧靠在，垂直居中于伸缩容器。伸缩容器额外的空间平均分配在伸缩项目的顶部和底部
d.baseline 伸缩项目根据它们的基线对齐，伸缩容器额外的空间可前后显示
e.stretch 伸缩项目填充整个伸缩容器
12.伸缩性box-flex
a.box-flex 可以灵活地控制伸缩项目的宽度来填充伸缩容器额外的空间，解决了传统web设计中习惯使用百分比定义伸缩布局的弊端

二、实践：

1.

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Title</title>  
  6.     <style type="text/css" media="screen">  
  7.         *{  
  8.             margin: 0;  
  9.             padding: 0;  
  10.         }  
  11.         body>div{  
  12.             border:1px solid #ccc;  
  13.             margin:20px;  
  14.             padding:10px;  
  15.         }  
  16.         div>div{  
  17.             background-color: #123589;  
  18.             border:1px solid #a6f5f3;  
  19.             width:100px;  
  20.             height:100px;  
  21.             text-align: center;  
  22.             line-height: 100px;  
  23.         }  
  24.         .box{  
  25.             display: -moz-box;  
  26.             display: -webkit-box;  
  27.   
  28.         }  
  29.         .inline-box{  
  30.             display:-moz-inline-box;  
  31.   
  32.         }  
  33.     </style>  
  34. </head>  
  35. <body>  
  36. <div class="box">  
  37.     <div>A</div>  
  38.     <div>B</div>  
  39.     <div>C</div>  
  40.     <div>D</div>  
  41. </div>  
  42. <div class="inline-box">  
  43.     <div>1</div>  
  44.     <div>2</div>  
  45.     <div>3</div>  
  46.     <div>4</div>  
  47. </div>  
  48. </body>  
  49. </html>  
2.

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Title</title>  
  6.     <style type="text/css" media="screen">  
  7.         *{  
  8.             margin:0;  
  9.             padding: 0;  
  10.         }  
  11.         body>div{  
  12.             border:1px solid #0055cc;  
  13.             margin: 20px;  
  14.             padding: 10px;  
  15.         }  
  16.         div > div{  
  17.             border:1px crimson #f36;  
  18.         }  
  19.         .box{  
  20.             display:-moz-box;  
  21.             display: -webkit-box;  
  22.             display: box;  
  23.         }  
  24.         .box-horizontal{  
  25.             -moz-box-orient:horizontal;  
  26.             -webkit-box-orient: horizontal;  
  27.             box-orient:horizontal;  
  28.         }  
  29.         .box-vertical{  
  30.             -moz-box-orient: vertical;  
  31.             -webkit-box-orient: vertical;  
  32.             box-orient:vertical;  
  33.         }  
  34.         .box-inline-axis{  
  35.             -moz-box-orient: inline-axis;  
  36.             -webkit-box-orient: inline-axis;  
  37.             box-orident:inline-axis;  
  38.         }  
  39.         .box-block-axis{  
  40.             -moz-box-orient: block-axis;  
  41.             -webkit-box-orient: block-axis;  
  42.             box-orident:block-axis;  
  43.         }  
  44.     </style>  
  45. </head>  
  46. <body>  
  47. <div class="box box-horizontal">  
  48.     <div>A</div>  
  49.     <div>B</div>  
  50.     <div>C</div>  
  51.     <div>D</div>  
  52. </div>  
  53. <div class="box box-vertical">  
  54.     <div>1</div>  
  55.     <div>2</div>  
  56.     <div>3</div>  
  57.     <div>4</div>  
  58. </div>  
  59. <div class="box box-inline-axis">  
  60.     <div>1-1</div>  
  61.     <div>2-1</div>  
  62.     <div>3-1</div>  
  63.     <div>4-1</div>  
  64. </div>  
  65. <div class="box box-block-axis">  
  66.     <div>1a</div>  
  67.     <div>2a</div>  
  68.     <div>3a</div>  
  69.     <div>4a</div>  
  70. </div>  
  71. </body>  
  72. </html>  
3.

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Title</title>  
  6.     <style type="text/css" media="screen">  
  7.         *{  
  8.             margin:0;  
  9.             padding: 0;  
  10.         }  
  11.         body>div{  
  12.             border:1px solid #0055cc;  
  13.             margin: 20px;  
  14.             padding: 10px;  
  15.         }  
  16.         div > div{  
  17.             border:1px crimson #f36;  
  18.         }  
  19.         .box{  
  20.             display:-moz-box;  
  21.             display: -webkit-box;  
  22.             display: box;  
  23.         }  
  24.         .box-horizontal{  
  25.             -moz-box-orient:horizontal;  
  26.             -webkit-box-orient: horizontal;  
  27.             box-orient:horizontal;  
  28.             width:250px;  
  29.         }  
  30.         .box-vertical{  
  31.             -moz-box-orient: vertical;  
  32.             -webkit-box-orient: vertical;  
  33.             box-orient:vertical;  
  34.             height:250px;  
  35.         }  
  36.         .box-direction-reverse{  
  37.             -moz-box-direction: reverse;  
  38.             -webkit-box-direction: reverse;  
  39.             box-direction:reverse;  
  40.         }  
  41.     </style>  
  42. </head>  
  43. <body>  
  44. <div class="box box-horizontal">  
  45.     <div>A</div>  
  46.     <div>B</div>  
  47.     <div>C</div>  
  48.     <div>D</div>  
  49. </div>  
  50. <div class="box box-vertical box-direction-reverse">  
  51.     <div>1</div>  
  52.     <div>2</div>  
  53.     <div>3</div>  
  54.     <div>4</div>  
  55. </div>  
  56. <div class="box box-inline-axis">  
  57.     <div>1-1</div>  
  58.     <div>2-1</div>  
  59.     <div>3-1</div>  
  60.     <div>4-1</div>  
  61. </div>  
  62. <div class="box box-block-axis box-direction-reverse">  
  63.     <div>1a</div>  
  64.     <div>2a</div>  
  65.     <div>3a</div>  
  66.     <div>4a</div>  
  67. </div>  
  68. </body>  
  69. </html>  
4.

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Title</title>  
  6.     <style type="text/css" media="screen">  
  7.         *{  
  8.             margin: 0;  
  9.             padding: 0;  
  10.         }  
  11.         body>div{  
  12.             border: 1px solid #0066cc;  
  13.             margin: 10px;  
  14.             width: 200px;  
  15.             height: 200px;  
  16.         }  
  17.         div > div{  
  18.             border: 1px crimson #f36;  
  19.             padding: 10px;  
  20.         }  
  21.         .box{  
  22.             display: -moz-box;  
  23.             display: -webit-box;  
  24.             display: box;  
  25.   
  26.             -moz-box-pack: start;  
  27.             -webkit-box-pack: start;  
  28.             box-pack: start;  
  29.             -moz-box-align: start;  
  30.             -webkit-box-align:start;  
  31.             box-align:start;  
  32.             box-pack:start;  
  33.             -moz-box-lines:multiple;  
  34.             -webkit-box-lines:multiple;  
  35.             box-lines:multiple;  
  36.         }  
  37.   
  38.         .box-horizontal{  
  39.             -moz-box-orient: horizontal;  
  40.             -webkit-box-orient:horizontal;  
  41.             box-orient:horizontal  
  42.         }  
  43.   
  44.         .box-vertical{  
  45.             -moz-box-orient:vertical;  
  46.             -webkit-box-orient:vertical;  
  47.             box-orient:vertical;  
  48.         }  
  49.     </style>  
  50. </head>  
  51. <body>  
  52. <div class="box box-horizontal">  
  53.     <div>A</div>  
  54.     <div>B</div>  
  55.     <div>C</div>  
  56.     <div>D</div>  
  57.     <div>E</div>  
  58.     <div>F</div>  
  59.     <div>G</div>  
  60.     <div>H</div>  
  61.     <div>1</div>  
  62.     <div>2</div>  
  63.     <div>3</div>  
  64. </div>  
  65.   
  66. <div class="box box-vertical">  
  67.     <div>A1</div>  
  68.     <div>B1</div>  
  69.     <div>C1</div>  
  70.     <div>D1</div>  
  71.     <div>E1</div>  
  72.     <div>F1</div>  
  73.     <div>G1</div>  
  74.     <div>H1</div>  
  75.     <div>11</div>  
  76.     <div>21</div>  
  77.     <div>31</div>  
  78. </div>  
  79. </body>  
  80. </html>  
5.

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Title</title>  
  6.     <style type="text/css" media="screen">  
  7.         .box{  
  8.             width: 500px;  
  9.             height: 200px;  
  10.             margin:20px;  
  11.             border:1px solid #ccc;  
  12.             font-size:20px;  
  13.             font-weight: bold;  
  14.             color:#fff;  
  15.         }  
  16.         .box-item{  
  17.             background-color: #6bb2ff;  
  18.         }  
  19.         .box,.box3 > div{  
  20.             padding: 10px;  
  21.         }  
  22.         .box div:nth-child(1){  
  23.             background-color: #819321;  
  24.             line-height: 50px;  
  25.         }  
  26.         .box div:nth-child(2){  
  27.             background-color: #168929;  
  28.             line-height: 50px;  
  29.         }  
  30.         .box div:nth-child(3){  
  31.             background-color: #197332;  
  32.             line-height: 50px;  
  33.         }  
  34.         .box div:nth-child(4){  
  35.             background-color: #390289;  
  36.         }  
  37.         .box div:nth-child(5){  
  38.             background-color: #702356;  
  39.         }  
  40.         .box{  
  41.             display: -webkit-box;  
  42.             display:-moz-box;  
  43.             display:box;  
  44.             -webkit-box-align: start;  
  45.             -moz-box-align: start;  
  46.             box-align:start;  
  47.             -webkit-box-pack:start;  
  48.             -moz-box-pack:start;  
  49.             box-pack:start;  
  50.         }  
  51.         .box-orient-vertical{  
  52.             -webkit-box-orient: vertical;  
  53.             -moz-box-orient: vertical;  
  54.             box-orient:vertical;  
  55.             height: 400px;  
  56.         }  
  57.         .box3{  
  58.             display: -webkit-box;  
  59.             display:-moz-box;  
  60.             display:box;  
  61.             -webkit-box-align: start;  
  62.             -moz-box-align: start;  
  63.             box-align:start;  
  64.             -webkit-box-pack:end;  
  65.             -moz-box-pack:end;  
  66.             box-pack:end;  
  67.             width:100px;  
  68.         }  
  69.         .box4{  
  70.             display: -webkit-box;  
  71.             display:-moz-box;  
  72.             display:box;  
  73.             -webkit-box-align: start;  
  74.             -moz-box-align: start;  
  75.             box-align:start;  
  76.             -webkit-box-pack:center;  
  77.             -moz-box-pack:center;  
  78.             box-pack:center;  
  79.             background-color: #238692;  
  80.             width:100px;  
  81.         }  
  82.         .box5{  
  83.             display: -webkit-box;  
  84.             display:-moz-box;  
  85.             display:box;  
  86.             -webkit-box-align: start;  
  87.             -moz-box-align: start;  
  88.             box-align:start;  
  89.             -webkit-box-pack:justify;  
  90.             -moz-box-pack:justify;  
  91.             box-pack:justify;  
  92.             background-color: #8f8f8f;  
  93.             width:100px;  
  94.         }  
  95.     </style>  
  96. </head>  
  97. <body>  
  98.     <div class="box box-pack-start">  
  99.         <div class="box-item">box~~1</div>  
  100.         <div class="box-item">box~~2</div>  
  101.         <div class="box-item">box~~3</div>  
  102.         <div class="box-item">box~~4</div>  
  103.         <div class="box-item">box~~5</div>  
  104.     </div>  
  105.     <div class="box box-pack-start box-orient-vertical">  
  106.         <div class="box-item">~~1</div>  
  107.         <div class="box-item">~~2</div>  
  108.         <div class="box-item">~~3</div>  
  109.         <div class="box-item">~~4</div>  
  110.         <div class="box-item">~~5</div>  
  111.     </div>  
  112.     <div class="box3 box-pack-start box-orient-vertical">  
  113.         <div class="box-item">~~1</div>  
  114.         <div class="box-item">~~2</div>  
  115.         <div class="box-item">~~3</div>  
  116.         <div class="box-item">~~4</div>  
  117.         <div class="box-item">~~5</div>  
  118.     </div>  
  119.     <div class="box4 box-pack-start box-orient-vertical">  
  120.         <div class="box-item">~~1</div>  
  121.         <div class="box-item">~~2</div>  
  122.         <div class="box-item">~~3</div>  
  123.         <div class="box-item">~~4</div>  
  124.         <div class="box-item">~~5</div>  
  125.     </div>  
  126.     <div class="box5 box-pack-start box-orient-vertical">  
  127.         <div class="box-item">~~1</div>  
  128.         <div class="box-item">~~2</div>  
  129.         <div class="box-item">~~3</div>  
  130.         <div class="box-item">~~4</div>  
  131.         <div class="box-item">~~5</div>  
  132.     </div>  
  133. </body>  
  134. </html>  
6.

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Title</title>  
  6.     <style type="text/css" media="screen">  
  7.         *{  
  8.             margin: 0;  
  9.             padding: 0;  
  10.         }  
  11.         body{  
  12.             color:#8f8f8f;  
  13.             font-size:20px;  
  14.         }  
  15.         .box-flex{  
  16.             width:910px;  
  17.             background: gray;  
  18.             margin:100px;  
  19.             display:-webkit-box;  
  20.             display:-moz-box;  
  21.             display:box;  
  22.         }  
  23.         .box-flex p:first-child{  
  24.             background: darkgreen;  
  25.             -moz-box-flex:1;  
  26.             -webkit-box-flex:1;  
  27.             box-flex:1;  
  28.         }  
  29.         .box-flex p:last-child{  
  30.             background: orange;  
  31.             -moz-box-flex:2;  
  32.             -webkit-box-flex:2;  
  33.             box-flex:2;  
  34.         }  
  35.     </style>  
  36. </head>  
  37. <body>  
  38.     <div class="box-flex">  
  39.         <p>  
  40.             我想吃一盘红烧肉～  
  41.         </p>  
  42.         <p>  
  43.             没有红烧肉，排骨我也很想吃～  
  44.         </p>  
  45.     </div>  
  46. </body>  
  47. </html>  
老源
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS伸缩盒子模型
weixin_47683287的博客
10-27 466
css伸缩盒子模型 <!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html c
前端学习日记（十）：css中伸缩盒布局的简单应用
m0_46364332的博客
03-10 287
vs code 伸缩盒布局的简单应用
Css布局-伸缩盒笔记
最新发布
王员外的博客
07-16 849
伸缩盒作为css3中的布局标准，不得不学呀，跟着b站yu神走一遍，yushen牛逼！flex布局应该是现在css中最常用的布局方式了，不学不行啊，加油。
CSS 伸缩布局
测试
12-06 236
主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的方向：默认主轴从左向右，侧轴默认从上到下主轴和侧轴并不是固定不变的，通过flex-direction可以互换。（1）必要元素：a、指定一个盒子为伸缩盒子display: flexb、设置属性来调整此盒的子元素的布局方式 例如flex-directionc、明确主侧轴及方...
CSS3之伸缩布局
jhkkk的博客
11-21 295
伸缩布局(CSS3) CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。 主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向 侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的 方向：默认主轴从左向右，侧轴默认从上到下 主轴和侧轴并不是固定不变的，通过flex-direction可以互换。 Fle...
CSS--布局--伸缩盒布局
cmy741741的博客
11-01 837
CSS3 弹性盒（Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素 进行排列、对齐和分配空白空间。 容器 使用弹性盒布局的父元素 display:flex; 主轴：Flex容器的主轴主要用来配置Flex项目。他不一定是水平的，这主要取决于fle-directio...
CSS 伸缩布局(CSS3) （三）
林彬的专栏
06-07 204
3、justify-content调整主轴对齐（水平对齐） 子盒子如何在父盒子里面水平对齐 值 描述 白话文 flex-start 默认值。项目位于容器的开头。 让子元素从父容器的开头开始排序但是盒子顺序不变 flex-end 项目位于容器的结尾。 让子元素从父容器的后面开始排序但是盒子顺序不变 center 项目位于容器的中心。 让子元素在父容器中间显示 space-...
详解CSS3伸缩布局盒模型Flex布局
12-09
CSS3引入了一种新的布局模式——Flexbox布局，即伸缩盒模型布局（Flexible Box）模型。用来提供一个更加有效的方式制定、调整和分布一个容器里的项目布局，即使它们的大小是未知或者动态的，这里简称Flex。 CSS3引入...
CSS3-多列布局-伸缩盒布局-伸缩项目
weixin_57218747的博客
05-03 376
多列布局-伸缩盒布局-伸缩项目 1 回顾 1.1 变换 transform ① 相关CSS属性 transform transform-origin transform-style perspective perspective-origin backface-visibility ② 变换方法 2D 变换： 位移： translateX() translateY() translate() 缩放： scaleX() scaleY() scale() 旋转： rotate() 3D 变换： 位移：
css3弹性布局-webkit-box的用法演示
11-04
在CSS3中，弹性布局（Flexbox）是一种强大的布局模式，允许开发者更加灵活地控制元素在容器中的排列、对齐和大小调整。在早期的浏览器实现中，WebKit浏览器（如Safari和Chrome）引入了一个实验性的前缀 `-webkit-box...
html 伸缩盒子布局,详解CSS3伸缩布局盒模型Flex布局
weixin_42127937的博客
06-17 2018
一、Flex 布局是什么？CSS3引入了一种新的布局模式——Flexbox布局，即伸缩盒模型布局(Flexible Box)模型。用来提供一个更加有效的方式制定、调整和分布一个容器里的项目布局，即使它们的大小是未知或者动态的，这里简称Flex。CSS3引入的布局模式Flex布局，主要思想是让容器有能力让其子项目能够改变其 宽度 、 高度 、 顺序 ，以最佳的方式填充可用空间。Flex容器会使子项目...
css3伸缩布局盒模型(一)
orq18810575870的博客
04-23 689
容器的设置语法是:display:box|inline-box我们来看看它们的区别:&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;css3的伸缩布局&lt;/title&gt; &lt;st
CSS之伸缩盒
qq_45753147的博客
03-07 984
Flexible Box是什么？Flexible意为可伸缩的，Box意为盒子，可以理解为一种新式的盒模型——伸缩盒模型。由CSS3规范提出，这是在原有的大家非常熟悉的block, inline-block, inline的基础上延伸出的新一代布局模式。 浏览器兼容性 作为非常现实的开发者，是否对一个新技术进行关注，首先要考虑它的浏览器兼容性如何。我们的伸缩盒模型的浏览器兼容性看起来还是相当不错的。 可以看到，现代浏览器基本上都支持了，IE10开始也支持了（IE和Safari分别加-ms-和-w
css之伸缩盒
weixin_45060861的博客
01-19 230
1.伸缩盒 父元素 display： flex;//设置当前盒子为弹性盒子 1.所有子元素自动成为成员项item 2.子元素宽高尺寸超过父元素时，默认被压缩 3.所有子元素的float属性失效 flex-direction：row // 默认 设置子元素的显示位置 flex-wrap：warp; //子元素宽度超出父元素是否换行 align-items：stretch; //默认值 盒子在交叉轴上进行拉伸，直至适应整个伸缩盒子容器 子元素： flex：number; //当
css弹性盒子（伸缩盒子）
频繁记录
06-14 837
css弹性盒子（伸缩盒子）
CSS伸缩盒模型
热爱WebGIS的博客
02-02 935
伸缩盒模型是CSS中的一种布局手段，可以使元素具有弹性，让元素可以跟随页面大小的改变而改变。
flex 伸缩布局
weixin_30786617的博客
08-06 104
伸缩布局 布局的传统解决方案，基于盒状模型，依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便。CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。 重要属性 a) display:flex:如果一个容器设置了这个属性，那么这个盒子里面的所...
伸缩盒布局
小脚的Blog
10-10 227
伸缩盒布局（Flexbox） CSS3弹性盒（FlexibleBox或flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。容器使用弹性盒布局的父元素display:flex;三列布局(一行中有3列)为了使得article分列显示，只需要为article元素的父元素section进行如下设置.section{display:flex;}修饰后，三列在一.
CSS3伸缩布局盒模型Flex布局详解
详解CSS3伸缩布局盒模型Flex布局 Flex布局是CSS3引入的一种新的布局模式，即伸缩盒模型布局（FlexibleBox）模型。用来提供一个更加有效的方式确定、调整和分布一个容器里的项目布局，即使它们的大小是未知或者动态...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值