【移动端网页布局】flex 弹性布局 ③ ( 设置主轴子元素排列方式

2023-05-10 15:40| 来源: 网络整理| 查看: 265

韩曙亮_ 2023-05-06 00:43:41 ©著作权

文章标签 html css 移动端网页布局 Flex弹性布局 justify-content 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者韩曙亮_的原创作品，请联系作者获取转载授权，否则将追究法律责任

文章目录一、设置主轴子元素排列方式 : justify-content 样式说明二、代码示例1、代码示例 - 子元素从头部开始排列2、代码示例 - 子元素从尾部开始排列3、代码示例 - 子元素在主轴方向上居中对齐4、代码示例 - 子元素平均分配剩余空间5、代码示例 - 两侧的子元素贴两边 / 其它元素平分剩余空间

一、设置主轴子元素排列方式 : justify-content 样式说明

justify-content 样式用于设置主轴子元素排列方式 ; 使用该样式前 , 务必先设定主轴方向 ;

justify-content 样式属性值说明 :

flex-start , 默认值 , 默认子元素从头部开始排列 ;如果主轴方向是从左到右 row 方向 , 则子元素从左到右排列 ;如果主轴方向是从右到左 row-reverse 方向 , 则子元素从右到左排列 ;flex-end , 子元素从尾部开始排列 ;如果主轴方向是从左到右 row 方向 , 则子元素从右到左排列 ;如果主轴方向是从右到左 row-reverse 方向 , 则子元素从左到右排列 ;center , 子元素在主轴方向上居中对齐 ;space-around , 平分剩余空间 ;space-between , 两侧的子元素贴两边 , 其它元素平分剩余空间 ;设置父容器中左右两边的子元素盒子贴父容器的左右两侧 , 中间的盒子居中对齐 ;

二、代码示例

1、代码示例 - 子元素从头部开始排列

核心代码 :

/* 将展示样式设置为 flex 即可启用弹性布局 */ display: flex; /* 将主轴设置为从左到右默认值 */ flex-direction: row; /* 子元素从头部开始排列默认值 */ justify-content: flex-start;

代码示例 :

flex 弹性布局 div { /* 将展示样式设置为 flex 即可启用弹性布局 */ display: flex; /* 将主轴设置为从左到右默认值 */ flex-direction: row; /* 子元素从头部开始排列默认值 */ justify-content: flex-start; /* 布局宽度充满整个浏览器 / 设备 */ width: 100%; /* 布局高度 500 像素 */ height: 500px; /* 设置背景颜色 */ background-color: pink; } div span { width: 100px; height: 100px; background-color: skyblue; margin: 5px; } 1 2 3 4

展示效果 :

2、代码示例 - 子元素从尾部开始排列

核心代码 :

/* 将展示样式设置为 flex 即可启用弹性布局 */ display: flex; /* 将主轴设置为从左到右默认值 */ flex-direction: row; /* 子元素从尾部开始排列 */ justify-content: flex-end;

代码示例 :

flex 弹性布局 div { /* 将展示样式设置为 flex 即可启用弹性布局 */ display: flex; /* 将主轴设置为从左到右默认值 */ flex-direction: row; /* 子元素从尾部开始排列 */ justify-content: flex-end; /* 布局宽度充满整个浏览器 / 设备 */ width: 100%; /* 布局高度 500 像素 */ height: 500px; /* 设置背景颜色 */ background-color: pink; } div span { width: 100px; height: 100px; background-color: skyblue; margin: 5px; } 1 2 3 4

展示效果 :

3、代码示例 - 子元素在主轴方向上居中对齐

核心代码 :

/* 将展示样式设置为 flex 即可启用弹性布局 */ display: flex; /* 将主轴设置为从左到右默认值 */ flex-direction: row; /* 子元素在主轴方向上居中对齐 */ justify-content: center;

代码示例 :

flex 弹性布局 div { /* 将展示样式设置为 flex 即可启用弹性布局 */ display: flex; /* 将主轴设置为从左到右默认值 */ flex-direction: row; /* 子元素在主轴方向上居中对齐 */ justify-content: center; /* 布局宽度充满整个浏览器 / 设备 */ width: 100%; /* 布局高度 500 像素 */ height: 500px; /* 设置背景颜色 */ background-color: pink; } div span { width: 100px; height: 100px; background-color: skyblue; margin: 5px; } 1 2 3 4

展示效果 :

4、代码示例 - 子元素平均分配剩余空间

核心代码 :

/* 将展示样式设置为 flex 即可启用弹性布局 */ display: flex; /* 将主轴设置为从左到右默认值 */ flex-direction: row; /* 子元素子元素平均分配剩余空间 */ justify-content: space-around;

代码示例 :

flex 弹性布局 div { /* 将展示样式设置为 flex 即可启用弹性布局 */ display: flex; /* 将主轴设置为从左到右默认值 */ flex-direction: row; /* 子元素子元素平均分配剩余空间 */ justify-content: space-around; /* 布局宽度充满整个浏览器 / 设备 */ width: 100%; /* 布局高度 500 像素 */ height: 500px; /* 设置背景颜色 */ background-color: pink; } div span { width: 100px; height: 100px; background-color: skyblue; margin: 5px; } 1 2 3 4

展示效果 :

5、代码示例 - 两侧的子元素贴两边 / 其它元素平分剩余空间

核心代码 :

/* 将展示样式设置为 flex 即可启用弹性布局 */ display: flex; /* 将主轴设置为从左到右默认值 */ flex-direction: row; /* 子元素两侧的子元素贴两边 , 其它元素平分剩余空间 */ justify-content: space-between;

代码示例 :

flex 弹性布局 div { /* 将展示样式设置为 flex 即可启用弹性布局 */ display: flex; /* 将主轴设置为从左到右默认值 */ flex-direction: row; /* 子元素两侧的子元素贴两边 , 其它元素平分剩余空间 */ justify-content: space-between; /* 布局宽度充满整个浏览器 / 设备 */ width: 100%; /* 布局高度 500 像素 */ height: 500px; /* 设置背景颜色 */ background-color: pink; } div span { width: 100px; height: 100px; background-color: skyblue; } 1 2 3 4

展示效果 :

赞收藏评论分享举报

上一篇：【移动端网页布局】流式布局案例 ⑦ ( 水平排列的图片链接 2 | 浮动设置 | 盒子模型类型设置 | 结构伪类选择器 )

下一篇：【移动端网页布局】流式布局案例 ④ ( Banner 栏制作 | 固定定位 | 标准流 | 百分比宽度设置 )

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章