flex与grid

已于 2023-08-18 14:37:10 修改
阅读量783 收藏 1
点赞数 1
分类专栏： html+css 常用 文章标签： css 前端 html5
于 2023-08-13 17:25:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Sandersonia/article/details/132159383
版权

flex与grid

1. 简单介绍

1.1 flex

弹性布局，只能处理一维布局

容器属性

  • flex-direction：子元素排列的方向，默认row
  • flex-wrap：一行内容内容过多时排列方式，即换行、不换行、
  • flex-flow：是 flex-direction 属性和 flex-wrap 属性的简写形式
  • justify-content：水平对齐方式
  • align-items：垂直对齐方式
  • align-content：多根轴线的对齐方式，即出现多行的情况下才生效的对齐方式
  • order：定义元素的排列顺序。数值越小，排列越靠前，默认为0
  • flex-grow：若存在剩余空间，自适应放大，默认为0，即不放大
  • flex-shrink：若空间不足，自适应缩小，默认为1，即空间不足则缩小
    flex-basis：元素的初始大小，默认为auto，默认使用它的宽度或者高度（视 flex-direction 属性而定）
  • flex：是flex-grow， flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto

子元素属性

  • align-self：单个子元素有与其他元素不一样的对齐方式，可覆盖align-items属性。

1.2 grid

网格布局，可以处理二维布局
与flex的区别：flex 只能处理一个维度上的布局，也就是行或者列，而 grid 可以将容器分为行和列，以单元格的形式出现。

容器属性

  • grid-auto-flow：排列循序，与 flex-direction 作用一样，默认row
  • grid-template-rows：每行的行高，用法：repeat方法、auto-fill、fr、auto
  • grid-template-columns ：每列的列宽，用法：repeat方法、auto-fill、fr、auto
  • row-gap：行之间的间距
  • column-gap ：列之间的间距
  • gap： 它是 row-gap 和 column-gap 的缩写
  • justify-items：水平对齐方式
  • align-items：垂直对齐方式
  • place-items：它是 justify-items 和 align-items 属性的简写。
  • justify-content：设置整个内容区域在容器内水平对齐方式
  • align-content：设置整个内容区域在容器内垂直对齐方式
  • place-content：它是 align-content 和 justify-content 的简写
  • grid-auto-columns：多余子元素的列宽
  • grid-auto-rows：多余子元素的行高
  • grid-template：它是grid-template-columns、grid-template-rows 和 grid-template-areas 简写。
  • grid：它是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow 的简写。
  • grid-template-areas ：与 grid-areas 配合使用，定义网格区域

子元素（gird项目）的属性

  • grid-column-start、grid-column-end 和 grid-row-start、grid-row-end，这些是设置子元素的开始网格线和结束网格线
  • grid-column：是 grid-column-start 和 grid-column-end 的简写。
  • grid-row：是 grid-row-start 和 grid-row-end 的简写。
  • justify-self：设置单个子元素内容的水平位置，与 justify-items 作用一样
  • align-self：设置单个子元素内容的垂直位置，与 align-items 作用一样
  • place-self：是align-self 和 justify-self 的简写
  • grid-areas：网格布局，与 grid-template-areas 结合使用


2. flex 与 grid 的详细介绍

2.1 flex

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
行内元素也可以使用 Flex 布局。注意：设为 Flex 布局，则子元素的float、clear属性将失效。

 .box{
   display: flex;
 }
.box1 {
   display: inline-flex;
 }

2.2基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
在这里插入图片描述
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

2.3 容器属性

以下6个属性设置在容器上。

  • flex-direction：主轴的方向（即项目的排列方向）。
  • flex-wrap：一行内容内容过多时排列方式
  • flex-flow：是 flex-direction 属性和 flex-wrap 属性的简写形式
  • justify-content：在主轴上的对齐方式
  • align-items：在交叉轴上如何对齐
  • align-content：多根轴线的对齐方式

2.3.1 flex-direction属性

flex-direction属性决定主轴的方向（即项目的排列方向）。

.box {
flex-direction: column | column-reverse | row | row-reverse;
}

在这里插入图片描述

它可能有4个值。

  • row（默认值）：主轴为水平方向，起点在左端。
  • row-reverse：主轴为水平方向，起点在右端。
  • column：主轴为垂直方向，起点在上沿。
  • column-reverse：主轴为垂直方向，起点在下沿。

注意： 当分布宽高不够时，自动压缩弹性子项的宽高直到符合容器的宽高

2.3.2 flex-wrap属性

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
换行后弹性子项不再压缩。

.box {
 	flex-wrap: nowrap | wrap | wrap-reverse;
}

它可能取三个值。

  • nowrap（默认）：不换行。
    在这里插入图片描述

  • wrap：换行，第一行在上方。
    在这里插入图片描述

  • wrap-reverse：换行，第一行在下方。
    在这里插入图片描述

2.3.3 flex-flow

flex-flow 属性是flex-direction 属性和 flex-wrap 属性的简写形式，默认值为row nowrap。

 .box {
	flex-flow: <flex-direction> || <flex-wrap>;
 }

2.3.4 justify-content 属性

justify-content属性定义了项目在主轴上的对齐方式

.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}

在这里插入图片描述

它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

  • flex-start（默认值）：左对齐
  • flex-end：右对齐
  • center： 居中
  • space-between：两端对齐，项目之间的间隔都相等。
  • space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
    也可以理解为将一行中剩余的空间平均分给元素的左右margin，并且不层叠。

2.3.5 align-items 属性

align-items属性定义项目在交叉轴上如何对齐。

.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}

在这里插入图片描述

它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

  • flex-start：交叉轴的起点对齐。若出现多行表示行的起点对齐，而不是轴。
  • flex-end：交叉轴的终点对齐。若出现多行表示行的终点对齐，而不是轴。
  • center：交叉轴的中点对齐。
  • baseline: 项目的第一行文字的基线对齐。
  • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

2.3.6 align-content属性

align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

 .box {
 align-content: flex-start | flex-end | center | space-between | space-around | stretch;
 }

在这里插入图片描述

该属性可能取6个值。

  • flex-start：与交叉轴的起点对齐。
  • flex-end：与交叉轴的终点对齐。
  • center：与交叉轴的中点对齐。
  • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch（默认值）：轴线占满整个交叉轴。

2.4 子元素（项目）的属性

以下6个属性设置在项目上。

  • order：元素尺寸
  • flex-grow：定义项目的放大比例
  • flex-shrink：定义了项目的缩小比例
  • flex-basis：定义了在分配多余空间之前，项目占据的主轴空间
  • flex
  • align-self：允许单个项目有与其他项目不一样的对齐方式

2.4.1 order属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
当所有元素都相同时，按照代码顺序排列

.item {
	order: <integer>;
 }

在这里插入图片描述

2.4.2 flex-grow属性

flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

 .item {
 	flex-grow: <number>; /* default 0 */
 }

在这里插入图片描述

  如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
  增长的倍数是扩张的尺寸比别的元素扩张的尺寸多一倍，也可以理解为剩余空间的分配量，例如div为500，a b原始100，b是2倍，则a=200,b=300

2.4.3 flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

.item {
    flex-shrink: <number>; /* default 1 */
}

在这里插入图片描述

  如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
  负值对该属性无效。

2.4.4 flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

.item {
	flex-basis: <length> | auto; /* default auto */
}

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

2.4.5 flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item {
	flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

flex: 0 1 auto;
flex-grow  当父元素有多余的空间时，默认值：0不放大，1 值越大划分越多
flex-shrink为1空间缩小时缩小，默认值：0不缩小
flex-basis为auto，则该元素的原本大小
isv支付宝小程序

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

2.4.6 align-self属性

align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

在这里插入图片描述
该属性可能取6个值，除了auto，其他都与align-items属性完全一致。



3. grid

gird 布局和 flex 布局的本质区别在于：flex布局是一维布局，一次只能处理一个维度上的布局，也就是行或者列；而grid布局是二维布局，它将容器划分为行和列，形成一个个单元格，然后我们就可以指定我们的 “ 项目 ” 所占的单元格，形成我们想要的布局。
在这里插入图片描述

3.1 gird的常用属性

display
grid-auto-flow // 排列方式
grid-template-rows // 行高，用法：repeat方法、auto-fill、fr、auto
grid-template-columns // 列宽 ，用法：repeat方法、auto-fill、fr、auto
row-gap // 行之间的间距
column-gap  // 列之间的间距
gap // row-gap 和 column-gap的缩写
justify-items // 水平对齐
align-items // 垂直对齐
place-items // justify-items 和 align-items 属性的简写
justify-content // 整个内容区域在容器内水平方向的对齐方式
align-content // 整个内容区域在容器内垂直方向的对齐方式
place-content // align-content 和 justify-content 的简写
grid-auto-columns // 多余的项目设置列宽
grid-auto-rows // 多余的项目设置行高
grid-template //  缩写
grid // 缩写
grid-template-areas // 与grid-area配合使用

3.1.1 grid-auto-flow 排列方式

定义项目排列顺序，取值有 row（默认值）、column、row dense、column dense

  • row dense 表示尽可能排满一行，不出现空格
  • column dense 表示尽可能排满一列，不出现空格
    在这里插入图片描述

3.1.2 grid-template-rows行高、grid-template-columns 列宽

grid-template-rows：用来定义每一行的行高
grid-template-columns：用来定义每一列的列宽
需要定义几行几列，就写几个值，空格隔开。

例如：下面定义了三行三列，每行高50px，每列宽100px

<style>
    .grid-container {
      display: grid;
      grid-template-columns: 100px 100px 100px;
      grid-template-rows: 50px 50px 50px;
    }
    .grid-item {
      background-color: rgba(233, 143, 206, 0.8);
      border: 1px solid black;
      text-align: center;
    }
</style>

<body>
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
  </div>
</body>

在这里插入图片描述

该属性有多种用法：

  • repeat 方法：repeat(重复次数，重复值);
    例如：grid-template-columns: 100px 100px 100px; 可以写成 grid-template-columns: repeat(3,100px);
    重复值可以写多个，比如： grid-template-columns: repeat(2,100px 50px 30px); 就相当于 grid-template-columns: 100px 50px 30px 100px 50px 30px;。
  • auto-fill 关键字：表示自动填充，每一行/列都尽可能的容纳固定大小的单元格。
    例如：grid-template-columns: repeat(auto-fill ,100px); 表示每一行都尽量容纳100px宽度的单元格。
  • fr 关键字：用来定义各行各列所占的比例。
    1、grid-template-rows: 1fr 2fr 3fr; 表示第二行的高度是第一行高度的两倍，第三行的高度是第一行的三倍。
    2、与长度单位混用：grid-template-rows: 1fr 2fr 50px;
    3、与 repeat 方法结合使用：grid-template-rows: repeat(6,1fr);
  • auto 关键字：表示浏览器自动分配宽度和高度，也就是会自动把剩余空间占满。
    例如想要每行/列都是相同的宽高，则可以全部设置为auto，也就是全部为正方形；grid-template-columns: auto auto auto; grid-template-rows: auto auto auto;

1、repeat方法：grid-template-columns: repeat(2,100px 50px 30px);效果如下：
在这里插入图片描述

2、auto-fill关键字：grid-template-columns: repeat(auto-fill ,100px); 效果如下：
在这里插入图片描述

3、fr 关键字：grid-template-rows: repeat(6,1fr); 效果如下
在这里插入图片描述

4、auto关键字：grid-template-columns: auto auto auto; 效果如下：
在这里插入图片描述
在这里插入图片描述

3.1.3 row-gap、column-gap 与 gap

row-gap 用来定义行与行之间的行间距
column-gap 用来定义列与列之间的列间距
gap 是 row-gap 和 column-gap 的缩写

gap: row-gap column-gap; 当两个值相等时，可以只写一个。
在这里插入图片描述

3.1.4 justify-items、align-items 与 place-items

justify-items 用来设置单元格的内容的水平方向的对齐方式
align-items 用来设置单元格的内容的垂直方向的对齐方式
place-items 是 justify-items 和 align-items 属性的简写。place-items: align-items justify-items; 如果两个值一样，可以只写一个。


justify-items 和 align-items 的取值都是一样的，都有多种用法：

  • start：左对齐
  • end：右对齐
  • center：居中
  • stretch：拉伸，占满单元格的整个宽度（默认值）
    在这里插入图片描述
    在这里插入图片描述

3.1.5 justify-content、align-content 与 place-content

justify-content 设置整个内容区域在容器内水平方向的对齐方式
align-content 设置整个内容区域在容器内垂直方向的对齐方式
place-content 是 align-content 和 justify-content 的简写，如果两个值一样，可以只写一个。


justify-content 和 align-content 的取值都是一样的，都有多种用法：
start（默认值） 、end 、 center 、space-around 、 space-between 、 space-evenly
在这里插入图片描述
在这里插入图片描述

3.1.6 grid-auto-columns、grid-auto-rows 属性

grid-auto-columns 给多余的项目设置列宽
grid-auto-rows 给多余的项目设置行高

下面我们只设置两行两列，但是我们有6个项目，因此会多出2个项目。

<style>
    .grid-container {
      display: grid;
      width: 400px;
      height: 400px;
      grid-template-columns: 100px 100px;
      grid-template-rows: 100px 100px;
      background-color: #ccc;
    }
    .grid-item {
      font-size: 25px;
      background-color: rgba(233, 143, 206, 0.8);
      border: 1px solid black;
      text-align: center;
    }
</style>

<body>
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
  </div>
</body>

在这里插入图片描述
在这里插入图片描述

3.1.7 grid-template-areas

定义网格区域，一般和项目属性grid-areas配合使用，后面会讲到。
下面定义了一个3行3列的容器：
在这里插入图片描述

3.1.8 grid-template、grid 属性

grid-template 属性是 grid-template-columns、grid-template-rows 和 grid-template-areas 简写。
grid 属性是 grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow 的简写。



3.2 子元素（项目）属性

grid-column-start //子元素列开始的网格线
grid-column-end //子元素列结束的网格线
grid-row-start //子元素行开始的网格线
grid-row-end //子元素行开始的网格线
grid-column // grid-column-start 与 grid-column-end 的简写
grid-row // grid-row-start 与 grid-row-end 的简写
justify-self // 子元素内容的水平位置
align-self // 子元素内容的垂直位置
place-self // justify-self 与 align-self 的简写
grid-area // 网格布局

3.2.1 grid-column-start、grid-column-end 和 grid-row-start、grid-row-end

指定项目的开始的网格线和结束的网格线。

<style>
    .grid-container {
      display: grid;
      width: 400px;
      height: 400px;
      grid-template-columns: 100px 100px 100px;
      grid-template-rows: 100px 100px 100px;
      background-color: #ccc;
    }
    .grid-item {
      font-size: 25px;
      background-color: rgba(233, 143, 206, 0.8);
      border: 1px solid black;
      text-align: center;
    }
    .item1{
      background-color: rgb(48, 201, 137);
      grid-column-start: 1;
      grid-column-end: 3;
    }
</style>

<body>
  <div class="grid-container">
    <div class="grid-item item1">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
  </div>
</body>

在这里插入图片描述
span 关键字：表示跨越多少个网格。

上述例子可以将 grid-column-start: 1; grid-column-end: 3;
替换成：grid-column-start: span 2;，效果是一样的。

3.2.3 grid-column、grid-row

grid-column 属性是 grid-column-start 和 grid-column-end 的简写，
grid-row 属性是 grid-row-start 和 grid-row-end 的简写。

grid-column: 1/3; 相当于 grid-column-start: 1; grid-column-end: 3;
grid-column: 1/3; 也可以写成 grid-column: 1/span 2; ，表示从第一条竖线开始，跨越两个单元格。

3.2.4 justify-self、align-self 与 place-self

justify-self、align-self 用于给单个项目设置单元格内容的水平、垂直位置，用法与 justify-items 和 align-items 属性一样。
在这里插入图片描述

3.2.4 grid-area

用于指定项目放置在哪一个区域，前面说过它一般用来和 grid-template-areas 属性配合使用

<style>
    .item1 {
      grid-area: header;
      background-color: rgb(237, 148, 170);
    }
    .item2 {
      grid-area: menu;
      background-color: rgb(186, 215, 133);
    }
    .item3 {
      grid-area: main;
      background-color: rgb(109, 109, 228);
    }
    .item4 {
      grid-area: right;
      background-color: rgb(229, 105, 194);
    }
    .item5 {
      grid-area: footer;
      background-color: rgb(63, 207, 233);
    }
    .grid-container {
      display: grid;
      grid-template-areas:
        'header header header header header header'
        'menu main main main main right'
        'menu footer footer footer footer footer';
      grid-gap: 10px;
      background-color: #eff3f6;
      padding: 10px;
    }
    .grid-container>div {
      text-align: center;
      padding: 20px 0;
      font-size: 30px;
    }
</style>

<body>
  <div class="grid-container">
    <div class="item1">Header</div>
    <div class="item2">Menu</div>
    <div class="item3">Main</div>
    <div class="item4">Right</div>
    <div class="item5">Footer</div>
  </div>
</body>

在这里插入图片描述
此外，grid-area 属性还可用作 grid-row-start、grid-column-start、grid-row-end、grid-column-end 简写。

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;






grid内容参考了 https://blog.youkuaiyun.com/lq313131/article/details/126190546

玩转flex和grid布局
m0_72030584的博客
04-09 553
玩转flex和grid布局，从概念到demo上手
拥抱未来的CSS布局方式flex与grid布局
08-11
本系列文章为对CSS中flex布局与grid布局的详细介绍
FLEX、Grid布局
Zzx060316的博客
01-17 1029
html布局
flex布局与grid布局简析
最新发布
发渐稀的博客
02-19 737
flex布局又称之为弹性布局；主要用于在一维上盒子的布局排列；设置 或 的元素，即为容器；作为 Flexbox 布局的父容器，控制其内部子元素的排列方式。Flex 容器内的直接子元素，即为项目；每个子元素都是一个 Flex 项目，可以通过 Flexbox 属性控制其行为。Flex 容器的主要方向，由 属性决定。与主轴垂直的轴。控制项目在垂直于主轴方向上的对齐方式。 2. 作用：定义项目的放大比例，分配剩余空间。 取值： 数值（默认值为 ），表示不放大。 如果所有项目的 都为 ，则剩余空间将等分
了解flex布局和grid布局
qq_41367352的博客
07-11 1569
Flexible Box 模型，通常被称为 flexbox（弹性布局），是一种一维的布局模型。//块级元素//行内元素flex布局支持6个容器属性：属性网格布局，是一个二维的布局方式，由纵横相交的两组网格线形成的框架性布局结构，能够同时处理行与列。//块级元素//行内元素。
Flex布局和Grid布局
testleaf.cn
12-06 1366
Flex布局，即Flex Box（弹性布局），是一种现代且强大的CSS布局方式。 效果： 决定主轴的方向，即项目的排列方向。取值包括：补充代码： 效果： 定义项目在轴线上的排列方式，即是否换行。取值包括：和属性的简写形式。 3.4、justify-content 定义项目在主轴上的对齐方式。取值包括：： ： ： ： ： ： ： 定义项目在交叉轴上的对齐方式。取值包括：： 补充代码： 效果： ： ： ： ： ： 更进一步了解： 代码： 效果： 用于控制的对齐方式，如果只有一行则不会起作用。
Flex布局及Grid布局
obj_obj_baby的博客
07-06 6182
Flex与Grid布局
深入解析CSS的flex与grid布局技术
6. Flex与Grid布局的兼容性问题及解决方案。 7. 实际项目中Flex和Grid布局的应用实例和最佳实践。 在深入学习本系列文章后，前端开发者将能够更好地掌握CSS布局的新技术，并能够运用这些技术来创建更为复杂和适应性...
Flex与Grid布局代码实践教程
相应的CSS文件（如style.css）将包含与布局相关的所有样式规则，这些规则使用Flex和Grid的相关属性来实现所需的布局效果。 在使用Flex和Grid布局时，开发者需要熟练掌握各种属性的使用场景以及它们之间的兼容性问题...
响应式网格布局：CSS Flex与Grid在导航与内容布局中的应用
在本资源中，将重点介绍使用CSS Flex和Grid属性实现的带有浮动右侧菜单的响应式网格布局，同时将探讨如何将这种布局与esc键（退出键）结合起来，实现特定的交互功能。 CSS Flex属性和CSS Grid属性都是CSS3中引入的...
CSS布局——Flex布局和Grid布局
kaisersama__的博客
06-19 981
在上面的代码中，.container是Flex容器，通过设置将其定义为Flex容器，并使用和属性将Flex项目在主轴和交叉轴上居中排布。.item是Flex项目，通过设置flex: 1;实现项目的灵活伸缩，并设置margin属性实现项目之间的间距。
flex布局和grid布局
明里灰的博客
12-17 1161
1.1 flex是一维布局系统，适合做局部布局，比如导航栏组件 因为一个flexbox一次只能处理一个维度上的元素布局，一行或一列 对于网格来说是一维布局，多行是1.5维，以内容为基础，内容自适应 没有放下是你空间自由分配，自动对齐 1.2 flex布局 flex容器flexbox的区域是flex容器，如果要创建一个flex容器，应该把一个容器的display属性值改为flex或者inline-flex。然后里面的直系子元素就会变为flex元素，紫云阿苏CSS属性都会有一个初始值，如下：
Flex布局 VS Grid布局
半截短袖的博客
09-02 1069
本文将从概念、基本语法等方面，来进行Flex布局和Grid布局的不同之处
Flex弹性盒子布局和Grid网格布局详解
qq_41765777的博客
08-16 2162
Flex布局（Flexible Box Layout，也称为弹性盒布局）是CSS3中的一种布局模式，旨在让容器能够自动调整其子元素的大小、顺序和对齐方式，以更好地适应不同设备和屏幕尺寸。它的核心理念是“弹性”，即容器中的元素可以根据可用空间进行伸缩。
Flex布局以及Grid布局
ZzXxYy_99的博客
01-17 1031
默认为0，即即使存在剩余空间也不会放大；所有项目的flex-grow为1：等分剩余空间（自动放大占位）；flex-grow为n项目，占据的空间（放大的比例）是flex-grow为1的n倍。
grid布局基础到实战
m0_58258716的博客
10-29 2651
grid布局
display属性和flex grid布局
Berg_liu的博客
11-07 1577
Display属性表 Flex布局 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫...
flex布局与grid布局
2401_88624699的博客
01-26 799
flex布局与grid布局
grid和flex区别
weixin_30687811的博客
04-09 667
网格容器 VS Flex容器 网格属性 VS Flex属性 转载于:https://www.cnblogs.com/cisum/p/10676649.html
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值