flex css中网格布局和布局指的是什么

  介绍

这篇文章给大家分享的是有关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;   }

 css中网格布局和flex布局指的是什么

<强>实战二:做一个常用的网站布局

html代码:

& lt; div 类=癰ox"比;   ,,,& lt; div 类=癶eader"祝辞header
  ,,,& lt; div 类=癱ontent"比;   ,,,,,,,& lt; div 类=發eft"祝辞left
  ,,,,,,,& lt; div 类=癱enter"祝辞center