【移动端网页布局】flex 弹性布局 ③ ( 设置主轴子元素排列方式 | justify-content 样式说明 | 子元素从头部开始排列 | 子元素从尾部开始排列 | 居中对齐 | 平均分配 )
文章目录
- 一、设置主轴子元素排列方式 : 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;
代码示例 :
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flex 弹性布局title>
<style>
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;
}
style>
head>
<body>
<div>
<span>1span>
<span>2span>
<span>3span>
<span>4span>
div>
body>
html>
展示效果 :
2、代码示例 - 子元素从尾部开始排列
核心代码 :
/* 将展示样式设置为 flex 即可启用弹性布局 */
display: flex;
/* 将主轴设置为 从左到右 默认值 */
flex-direction: row;
/* 子元素 从尾部开始 排列 */
justify-content: flex-end;
代码示例 :
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flex 弹性布局title>
<style>
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;
}
style>
head>
<body>
<div>
<span>1span>
<span>2span>
<span>3span>
<span>4span>
div>
body>
html>
展示效果 :
3、代码示例 - 子元素在主轴方向上居中对齐
核心代码 :
/* 将展示样式设置为 flex 即可启用弹性布局 */
display: flex;
/* 将主轴设置为 从左到右 默认值 */
flex-direction: row;
/* 子元素 在主轴方向上 居中对齐 */
justify-content: center;
代码示例 :
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flex 弹性布局title>
<style>
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;
}
style>
head>
<body>
<div>
<span>1span>
<span>2span>
<span>3span>
<span>4span>
div>
body>
html>
展示效果 :
4、代码示例 - 子元素平均分配剩余空间
核心代码 :
/* 将展示样式设置为 flex 即可启用弹性布局 */
display: flex;
/* 将主轴设置为 从左到右 默认值 */
flex-direction: row;
/* 子元素 子元素平均分配 剩余空间 */
justify-content: space-around;
代码示例 :
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flex 弹性布局title>
<style>
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;
}
style>
head>
<body>
<div>
<span>1span>
<span>2span>
<span>3span>
<span>4span>
div>
body>
html>
展示效果 :
5、代码示例 - 两侧的子元素贴两边 / 其它元素平分剩余空间
核心代码 :
/* 将展示样式设置为 flex 即可启用弹性布局 */
display: flex;
/* 将主轴设置为 从左到右 默认值 */
flex-direction: row;
/* 子元素 两侧的子元素贴两边 , 其它元素平分 剩余空间 */
justify-content: space-between;
代码示例 :
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flex 弹性布局title>
<style>
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;
}
style>
head>
<body>
<div>
<span>1span>
<span>2span>
<span>3span>
<span>4span>
div>
body>
html>
展示效果 :
