Open xiaochengzi6 opened 1 year ago
在线修改样式
决定是否是 flex 布局的是你是否设置了 display: flex
display: flex
一、flex 布局最重要的是明确主轴和交叉轴的概念
justify-content: 决定在这个盒子内 子盒子 在主轴方向的排布情况
justify-content
space-between 两边靠边,中间平均分布 || space-evenly 平均排列 || space-around 设置每一个元素的左右距离让其排列
align-items: 决定在这个盒子内 子盒子 在交叉轴方向的分布情况
align-items
二、父盒子的内部的排列情况
一般情况都是默认为横向排列
flex-direction:column 设置子盒子纵向排列 || column 纵向排列反转 || row 横向排列 || row-reverse 横向排列翻转
flex-direction
flex-direction:column-reverse 设置子盒子纵向排列 但是排列方向会颠倒过来
需要注意的是当设置 flex-direction: column; 时主轴方向也发生改变以原来交叉轴方向变成主轴方向
三、额外的
关于justify-content 和 align-items这两个属性都有共同的值 flex-start、 flex-end和center
justify-content 和 align-items
flex-start
flex-end
center
以上都是处理子盒子在方向上的分布
align-self:决定自己在父盒子在交叉轴方向的排列
align-self
主轴方向上可以通过 margin 来决定其分布
flex: 调节盒子空间的占空比 它又是 flex-grow,flex-shrink和flex-basiz, 三者之和
flex
flex-grow
flex-shrink
flex-basiz
flex-basis:设置盒子在主轴方向的尺寸 默认值 auto
flex-basis
设置了 flex-basis 就会决定这个盒子在主轴方向上的大小比如说现在是一个行排列, 主轴方向就是盒子的宽度,当设置 flex-basis: 200px 的时候就决定了整个盒子的宽度,在设置 width: 220px 时候就会失效,但能通过 min-width 来设置盒子的主轴大小
行排列
flex-basis: 200px
width: 220px
min-width
flex-grow: number: 当 flex 有剩余空间的时候,子元素占据剩余空间的占比
flex-grow: number
flex-shrink: number: 当子盒子的宽度总和超过容器盒子的时候就会按照这个比例收缩
flex-shrink: number
flex-wrap: wrap:换行,子元素超过父元素的时候通过整个来开始换行
flex-wrap: wrap
一、盒子水平居中
1、子元素内使用 text-align: center; margin: 0 auto
text-align: center; margin: 0 auto
.father{ height: 300px; width: 400px; background-color: aqua; /* 水平居中 */ } .child{ height: 100px; width: 100px; background-color: blue; /* 水平居中 */ text-align: center; margin: 0 auto; }
2、flex 布局: 父盒子设置 主轴的分布方向为center
主轴的分布方向
.father{ height: 300px; width: 400px; background-color: aqua; /* 水平居中 */ display: flex; justify-content: center; }
3、父元素使用 table-cell 布局方式 子元素是块级就设置其 margin: auto 否则设置父元素为 text-align: center
margin: auto
text-align: center
.father{ height: 300px; width: 300px; background-color: aqua; /* */ display: table-cell; vertical-align: middle; /*子元素是行内级元素*/ text-align: center; }
二、盒子内容水平居中
1、高度和line-height 相同
.child{ height: 100px; lint-height: 100px }
1、使用 flex 布局
.flex { display: flex; flex-direction: column; justify-content: center; }
2、父元素使用 table-cell 布局方式在设置 vertical-align: middle 让其垂直居中
vertical-align: middle
.father{ height: 300px; width: 300px; background-color: aqua; /* */ display: table-cell; vertical-align: middle; }
一、盒子关系的居中
1.1 不考虑宽高
1.1.1 使用 flex 布局
.father{ background-color: aqua; /* 居中 */ display: flex; justify-content: center; align-items: center; }
1.1.2 父盒子设置 flex 布局方式 子盒子使用 margin: auto
.father{ height: 300px; width: 300px; background-color: aqua; /* */ display: flex; } .child{ background-color: blue; /* */ margin: auto; }
1.1.3 父元素要确保是正方形才能保证居中 而且也用到了css 的动画
子元素绝对定位后在原来的位置上去移动各一半然后让其旋转到中心位置
.child{ height: 100px; width: 100px; background-color: blue; /* */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /*可以将 transform 换成下面属性*/ /* margin-left: -50px; */ /* margin-top: -50px; */ }
优点是不用考虑子盒子的宽高
1.1.4 父元素使用 tabel-cell 布局方式,设置 vertical-align: middle 垂直居中
水平居中:子盒子是块级就设置子元素为 margin: auto 子盒子是行内级就设置父元素为 text-align: center
.father{ height: 300px; width: 300px; background-color: aqua; /* */ display: table-cell; vertical-align: middle; text-align: center; } .child{ height: 100px; width: 100px; background-color: blue; /* */ display: inline-block; }
1.1.5 使用 grid 布局 但兼容性较差
.father{ height: 300px; width: 300px; background-color: aqua; /* */ display: grid; justify-content: center; align-items: center; }
1.1.6 使用 grid 布局时 子元素设置 margin: auto 缺点: 兼容性差
.father{ height: 300px; width: 300px; background-color: aqua; /* */ display: grid; } .child{ height: 100px; width: 100px; background-color: blue; /* */ margin: auto; }
2.1 考虑宽高
2.1.1 定位后让其脱离文档流然后设置其 margin: auto
.child{ height: 100px; width: 100px; background-color: blue; /* */ position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }
二、盒子和内容的居中
1.1 通过伪元素设置其 line-height: 父元素高度 让盒子内要居中的元素设置为行内级才行
line-height: 父元素高度
.father{ height: 300px; width: 300px; background-color: aqua; /* */ text-align: center; } .father::after{ content: ''; line-height: 300px; } .child{ /* height: 100px; */ /* width: 100px; */ background-color: blue; /* */ display: inline-block; }
子盒子或者要居中的东西不能有高度,这样才能居中,一般都是设置内容的
[flex 居中的方式](https://juejin.cn/post/6844904098777710599#heading-3)
[css flex 布局](https://juejin.cn/post/6844904116141948936)
[css八种居中方式](https://juejin.cn/post/7119133627568357384#heading-0)
在线修改样式
flex 布局
决定是否是 flex 布局的是你是否设置了
display: flex
父盒子
一、flex 布局最重要的是明确主轴和交叉轴的概念
justify-content
: 决定在这个盒子内 子盒子 在主轴方向的排布情况align-items
: 决定在这个盒子内 子盒子 在交叉轴方向的分布情况二、父盒子的内部的排列情况
一般情况都是默认为横向排列
flex-direction
:column 设置子盒子纵向排列 || column 纵向排列反转 || row 横向排列 || row-reverse 横向排列翻转flex-direction
:column-reverse 设置子盒子纵向排列 但是排列方向会颠倒过来三、额外的
关于
justify-content 和 align-items
这两个属性都有共同的值flex-start
、flex-end
和center
子盒子
以上都是处理子盒子在方向上的分布
align-self
:决定自己在父盒子在交叉轴方向的排列主轴方向上可以通过 margin 来决定其分布
flex 盒子
flex
: 调节盒子空间的占空比 它又是flex-grow
,flex-shrink
和flex-basiz
, 三者之和flex-basis
:设置盒子在主轴方向的尺寸 默认值 auto设置了 flex-basis 就会决定这个盒子在主轴方向上的大小比如说现在是一个
行排列
, 主轴方向就是盒子的宽度,当设置flex-basis: 200px
的时候就决定了整个盒子的宽度,在设置width: 220px
时候就会失效,但能通过min-width
来设置盒子的主轴大小flex-grow: number
: 当 flex 有剩余空间的时候,子元素占据剩余空间的占比flex-shrink: number
: 当子盒子的宽度总和超过容器盒子的时候就会按照这个比例收缩换行
flex-wrap: wrap
:换行,子元素超过父元素的时候通过整个来开始换行水平居中
一、盒子水平居中
1、子元素内使用
text-align: center; margin: 0 auto
2、flex 布局: 父盒子设置
主轴的分布方向
为center3、父元素使用 table-cell 布局方式 子元素是块级就设置其
margin: auto
否则设置父元素为text-align: center
二、盒子内容水平居中
1、高度和line-height 相同
垂直居中
1、使用 flex 布局
2、父元素使用 table-cell 布局方式在设置
vertical-align: middle
让其垂直居中居中
一、盒子关系的居中
1.1 不考虑宽高
1.1.1 使用 flex 布局
1.1.2 父盒子设置 flex 布局方式 子盒子使用
margin: auto
1.1.3 父元素要确保是正方形才能保证居中 而且也用到了css 的动画
子元素绝对定位后在原来的位置上去移动各一半然后让其旋转到中心位置
优点是不用考虑子盒子的宽高
1.1.4 父元素使用 tabel-cell 布局方式,设置
vertical-align: middle
垂直居中水平居中:子盒子是块级就设置子元素为
margin: auto
子盒子是行内级就设置父元素为text-align: center
1.1.5 使用 grid 布局 但兼容性较差
1.1.6 使用 grid 布局时 子元素设置
margin: auto
缺点: 兼容性差2.1 考虑宽高
2.1.1 定位后让其脱离文档流然后设置其
margin: auto
二、盒子和内容的居中
1.1 通过伪元素设置其
line-height: 父元素高度
让盒子内要居中的元素设置为行内级才行子盒子或者要居中的东西不能有高度,这样才能居中,一般都是设置内容的
参考文章:
[flex 居中的方式](https://juejin.cn/post/6844904098777710599#heading-3)
[css flex 布局](https://juejin.cn/post/6844904116141948936)
[css八种居中方式](https://juejin.cn/post/7119133627568357384#heading-0)