介绍
,,,& lt; div 类=癱ontent"比;
,,,,,,,& lt; div 类=發eft"祝辞left这篇文章给大家分享的是有关css中网格布局和flex布局指的是什么的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。
在css中,网格布局指的是“网格布局”,是一个二维系统,可以同时处理行和列,可以通过将css规则用于父元素和该元素的子元素来使用网格布的局,而flex布局指的是“弹性布局”,是一个一维系统,用来为盒状模型提供最大的灵活性。
引用><强>一、flex布局简介强>
flex是灵活的盒子(弹性布局)的简介,是一个一维系统,用来为盒状模型提供最大的灵活性。
使用:任何容器(行内元素可设置为显示:inline-block);
特点:空间分布在行中进行,而非整体
<强>二、网格布局简介强>
嘲骂布局(css网格布局)是css中最强大的布局系统,是一个二维系统,可以同时处理行和列,可以通过将css规则用于父元素(网格容器)和该元素的子元素(网格元素)来使用网格布局。
使用:对父元素设置演示:网格;grid-template-colums和grid-template-rows来设置几行几列,然后对子元素设置占据几行几列
特点:二维网格结构,十分便于操作
<强>实战一:用网格布局做一个简单的九宫格强>
html代码:
& lt; div 类=癰ox"比; ,,,& lt; div> & lt;/div> ,,,& lt; div> & lt;/div> ,,,& lt; div> & lt;/div> ,,,& lt; div> & lt;/div> ,,,& lt; div> & lt;/div> ,,,& lt; div> & lt;/div> ,,,& lt; div> & lt;/div> ,,,& lt; div> & lt;/div> ,,,& lt; div> & lt;/div> & lt;/div>css代码:
.box { ,,,宽度:,1200 px; ,,,身高:,80 vh; ,,,显示:,网格;,,//,开启网格布的局 ,,,grid-template-columns:,重复(3 30%),,,,//,设置列 ,,,grid-template-rows:,重复(3 30%);,,//,设置行 ,,,grid-column-gap:, 20 px;,//,设置网格之间的间距 ,,,grid-row-gap:, 20 px;,//,设置网格之间的间距 } .box div { background - color,,,,, # 34 ce57; }
<强>实战二:做一个常用的网站布局强>
html代码:
& lt; div 类=癰ox"比; ,,,& lt; div 类=癶eader"祝辞header