CSS-弹性盒子-主轴侧轴对齐方式
除了主轴和侧轴之外的弹性盒子相关元素以后再发文补齐,本章是了解主侧轴的概念为主
一、基本概念
在开始之前,我们需要了解 Flex 和 主轴以及交叉轴(侧轴) 别分是什么:
1.首先是Flex:
Flex是Flexible Box的缩写,意味“弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为flex布局。
弹性盒子是一种新的布局方式,特别适合移动端的布局。注:弹性盒子布局-display:flex;
采用Flex布局的元素,称为Flex容器(flex container),简称“容器”。它所有的子元素自动成为容器成员,称为Flex项目(flex item),简称“项目”。
需要注意的是:设为Flex布局以后,子元素的float、clear、和vertical-align属性将失效。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)
2.主轴-mian axis 水平的主轴 主轴的开始位置(与边框的交叉点)叫做main start,它的结束位置叫做main end;
交叉轴的开始位置叫做cross start,结束位置叫做cross end。
项目默认沿主轴排列。
单个项目的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
二、容器的属性
以下6个属性设置在容器上。
2-1.flex-direction属性
flex-direction属性决定主轴的方向(即项目的排列方向)。
-
.box{
-
-
flex-direction: row |row-reverse |column | column-reverse ;
-
/*
-
flex-direction属性决定主轴的方向(即项目排列的方向/子盒子的排列方向)
-
它有四个值:
-
1.row(默认值):主轴在水平方向,起点在左端。
-
-
2.row-reverse:主轴为水平方向,起点在右端
-
-
3.column:主轴为垂直方向,起点在上沿。
-
-
4.column-reverse:主轴为垂直方向,起点在下沿。
-
*/
-
}
display:flex;(作用:告诉浏览器你要引用弹性布局了,不写【弹性盒子布局】代码将无法生效)
2-1-1.row(默认值):主轴在水平方向,起点在左端。
flex-direction: row ;
2-1-2.row-reverse:主轴为水平方向,起点在右端
flex-direction: row-reverse ;
2-1-3.column:主轴为垂直方向,起点在上沿。
flex-direction:column;
2-1-4.column-reverse:主轴为垂直方向,起点在下沿。
flex-direction:column-reverse;
2-2.flex-wrap属性
默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。
它可能取三个值。
2-2-1.flex-wrap:nowrap;(默认):不换行。 (默认值,多出来的项目会挤压原本项目所占的空间)
2-2-2.flex-wrap:wrap;(换行,第一行在上方)
2-2-3.flex-wrap:wrap-reverse;(换行,第一行在下方)
想要让项目紧贴在一起,可以用align-content: flex-start;(控制折行后的行间距,需要注意的一点是,该标签是随着主轴侧轴的改变而改变的)
2-2-3-1.align-content: flex-start | flex-end | center | space-around |space-between;
2-2-3-1-1.flex-start;
2-2-3-1-1.flex-end;
2-2-3-1-1.center
2-2-3-1-1.space-around;
2-2-3-1-1.space-between;
2-3.flex-flow
2-4.justify-content
2-4-1.justify-content: flex-start;(默认值,左对齐,调整主轴对齐的方向)
2-4-2.justify-content: flex-end;(右对齐,调整主轴对齐的方向)
2-4-3.justify-content: flex-end;(居中,调整主轴对齐的方向)
2-4-4. justify-content: space-between;(两端对齐,紧紧贴在左右两端,项目直接的距离都相等)
2-4-5.justify-content: space-around; (距离环绕,左右两端,1的左端和5的右端是其余部分的一半;每个项目两侧的间隔相等。所以项目之间的间隔比项目与边框的间隔大一倍。)
2-4-5-1.justify-content: space-around; (距离环绕,左右两端,在只有两个项目的情况下,也是一样的,左右两端距离是中间的一半;每个项目两侧的间隔相等。所以项目之间的间隔比项目与边框的间隔大一倍。)
2-4-6.【补充】justify-content: center; (水平/横向 居中) 取自W3school
2-4-6.【补充】align-items: center; (垂直/纵向 居中) 取自W3school
2-5.align-items(调整侧轴 / 交叉轴位置;该属性定义交叉轴上如何对齐)
2-5-1.align-items:flex-start;(默认值,交叉轴的起点对齐)
全图对照:
2-5-2.align-items:flex-end;(交叉轴的终点对齐)
2-5-3.align-items: center; (居中,与交叉轴/侧轴的中点对齐)
2-5-4.align-items: baseline; (项目的第一行文字的基线对齐)
2-5-5.align-items: stretch;(默认值,如果项目未设置高度或设为auto,将占满整个容器的高度)
代码:
-
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
<title>Document</title>
-
<style>
-
.box{
-
width: 600px;
-
height: 600px;
-
background-color: aqua;
-
border: 1px solid rgb(0, 0, 0);
-
margin:100px auto;
-
display: flex;
-
/* 告诉浏览器你要引用弹性布局了 */
-
flex-direction:row;
-
/* 改变主轴方向 */
-
justify-content: row;
-
/* 改变布局 */
-
align-items: stretch;
-
/* 调整侧轴/交叉轴 */
-
-
}
-
.box div{
-
width: 60px;
-
/* height: 60px; */
-
/* background-color: yellowgreen; */
-
border: 1px dashed indianred
-
/*
-
flex-direction属性决定主轴的方向(即项目排列的方向/子盒子的排列方向)
-
它有四个值:
-
1.row(默认值):主轴在水平方向,起点在左端。
-
-
2.row-reverse:主轴为水平方向,起点在右端
-
-
3.column:主轴为垂直方向,起点在上沿。
-
-
4.column-reverse:主轴为垂直方向,起点在下沿。
-
*/
-
}
-
.box1{
-
background-color: rgb(56, 61, 4);
-
}
-
.box2{
-
background-color: rgb(165, 22, 81);
-
}
-
.box3{
-
background-color: rgb(127, 172, 23);
-
}
-
.box4{
-
background-color: rgb(146, 32, 137);
-
}
-
.box5{
-
background-color: rgb(234, 250, 6);
-
}
-
</style>
-
</head>
-
<body>
-
<div class="box">
-
-
<div class="box1">1111</div>
-
<div class="box2">2222</div>
-
<div class="box3">3333</div>
-
<div class="box4">4444</div>
-
<div class="box5">5555</div>
-
-
</div>
-
-
</body>
-
</html>
2-6.align-content
这篇好文章是转载于:编程之路
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 编程之路
- 本文地址: /boutique/detail/tanhhaebcj
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13