Flex布局 + Grid布局

shishi_RUYI

已于 2022-03-02 15:58:39 修改

阅读量1k

点赞数

分类专栏： HTML5 CSS3 文章标签： css css3 html

于 2022-03-02 15:39:21 首次发布

本文链接：https://blog.csdn.net/weixin_48362720/article/details/123231927

版权

本文详细介绍了CSS中的Flex布局和Grid布局。Flex布局适用于一维布局，通过容器属性和项目属性控制子元素的位置和排列。Grid布局则适用于二维布局，能够方便地划分行和列，调整单元格间距和对齐方式。两者都是现代网页布局的重要工具。

摘要由CSDN通过智能技术生成

flexible box弹性盒子 — 任何元素都可以指定为flex布局

flex布局：父元素—容器（flex container），子元素—项目（flex item）

**原理：**当通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

**注意：**当父盒子设为flex布局后，子元素的float、clear、vertical-align属性都失效

display: flex;
/* 父元素指定为flex布局后，子元素都可以设置宽高 */

flex-direction: row / row-reverse / column / column-reverse;

justify-content: flex-start;默认值

flex-start / flex-end / center
space-around 平分剩余空间
space-between 先两边贴边，再平分剩余空间

flex-warp: nowrap / wrap;

/* 复合写法 */
flex-flow: column wrap;设置主轴方向 允许换行

align-items: center / flex-start / flex-end / stretch子盒子不给高度时拉伸;

align-content: flex-start;默认值

flex-start / flex-end / center / stretch
space-around 平分剩余空间
space-between 先两边贴边，再平分剩余空间

flex: number;
flex: 1;

align-self: auto;默认
center / flex-start / flex-end / stretch

/* 数值越小，排列越靠前，默认为0，可以负值 */

关注

专栏目录