CSS的弹性盒子布局

目录

弹性布局

弹性伸缩盒布局

是否换行

改变朝向（自下而上）

居中

两端对齐 中间自适应

两端对齐 中间自适应 两端留空 值为中间的一半

均匀分布

子盒子排列方向

右向排列

从下往上纵向排列

子盒子纵向排列顺序

靠下排列

垂直居中

滚动条

内容超出则出现滚动条,内容不溢出则没有滚动条

溢出隐藏

强制出现滚动条

多列布局

分几列

边框可以输入宽度 样式 颜色 也可以分开写

宽度

样式

颜色

响应式布局 媒体查询

在宽度最大800px和最小600px之间的时候的样式

---

弹性布局

弹性伸缩盒布局

display: flex 属性要写在父盒子

display: flex;

是否换行

默认:nowrap不换行 wrap换行

flex-wrap: nowrap;

改变朝向（自下而上）

flex-wrap: wrap-reverse;

居中

justify-content: center;

两端对齐 中间自适应

justify-content: space-between;

两端对齐 中间自适应 两端留空 值为中间的一半

justify-content: space-around;

均匀分布

justify-content: space-evenly;

子盒子排列方向

column纵向排列 row默认

flex-direction: column;

右向排列

flex-direction: row-reverse;

从下往上纵向排列

flex-direction: column-reverse;

子盒子纵向排列顺序

align-items: center;

靠下排列

align-items: flex-end;

垂直居中

要和flex-wrap:wrap一起用

align-content: center;

滚动条

内容超出则出现滚动条,内容不溢出则没有滚动条

overflow: auto;

溢出隐藏

overflow: hidden;

强制出现滚动条

overflow: scroll;

多列布局

分几列

column-count: 6;

边框可以输入宽度 样式 颜色 也可以分开写

column-rule:10px solid red;

宽度

column-rule-width: 10px ;

样式

column-rule-color: red;

颜色

column-rule-style: solid;

响应式布局 媒体查询

在宽度最大800px和最小600px之间的时候的样式

@media screen and (max-width:800px) and (min-width:600px){
div{
width: 400px;
height: 200px;
background-color: black;
  }
}