flex布局的基本知识和媒体查询

16lz 2021-07-23

术语

两个轴：主轴和交叉轴
两条线：起始线和终止线
两个主题：容器和项目
一个空间：剩余空间/有效空间

任何一个可视元素，添加 display:flex 后都可以专为 flex 弹性容器；
flex 弹性容器内的直接子元素称之为 flex 的项目，它是真正的布局对象

容器的常用属性

flex-wrap 规定 tlex 容器是单行或者是多行；
flex-direction 规定主轴方向；
flex-flow:row nowrap 第一个参数为主轴方向，第二个参数为是否换行；
justify-content（根据主轴）

flex-start:所有项目从左边排列；
flex-end:所有的项目从右边开始排列；
center: 所有项目居中
space-between:两边对齐；
space-around:分散对齐；
space-evenly:平均对齐；

align-items(根据交叉轴)

stretch:拉伸
flex-start：从上往下对齐
flex-end：从下往上对齐
center: 居中

项目的常用属性

flex-basis:项目在主轴上的宽度（优先级大于 width 但是小雨 min-width）
flex-shrink：是否收缩（0 禁制收缩；1 可以收缩）
flex-grow：是否放大（0 禁制；1 允许）
flex:0 1 auto;是否放大，是否收缩，宽度
align-self;该项目从交叉轴上面开始还是下面开始
order;项目排序
flex: 如果是单数字，表示的是flex-grow，如果所有项目的flex-grow属性都为1，则它们将等分剩余空间。若是比例不同则按照各自设置的比例分配剩余空间。

媒体查询

/* 屏幕大于等于400px屏幕就显示红色 */
@media screen and (min-width: 400px) {
  body {
    background-color: red;
  }
}

更多相关文章

随机推荐