css适配布局

flex布局

1. 原理：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
2. 父项常见的属性
   • flex-direction设置主轴的方向（决定主轴与侧轴）
     • 属性值：row 默认从左到右；row-reverse 从右到左；column 从上到下；column-reverse 从下到上
   • jsutify-content 设置主轴上子元素排列方式 ☆
     • jsutify-content 属性定义了项目在主轴上的对齐方式(首先确定主轴是谁)
     • 属性值：flex-start 从上到下； flex-end 从下到上；space-around 平均分配剩余空间； space-between 先两边贴边，再平均分配剩余空间
   • align-items 设置侧轴上的子元素排列方式(单行)☆
     • 属性值：flex-start 从上到下；flex-end 从下到上；center 挤在一起居中；stretch 默认 拉伸 子元素不给高度
   • flex-wrap 设置子元素是否换行☆
     • 属性值：nowrap 默认 不换行；wrap 换行
   • align-content 设置侧轴上的子元素的排列方式(多行有换行情况)

   //样式
   <style>
           div {
        
               display: flex;
               width: 800px;
               height: 400px;
               background-color: pink;
               /* 换行 */
               flex-wrap: wrap;
               /* 因为有了换行，此时我们侧轴上控制子元素的对齐方式我们用 align-content */
               /* 默认值flex-start从侧轴的头部开始排列 */
               /* align-content: flex-start; */
               /* flex-end从侧轴的尾部开始排列 */
               /* align-content: flex-end; */
               /* 在侧轴的中间显示 */
               /* align-content: center; */
               /* 子项先分布在侧轴的两头，在分配剩余空间 */
               /* align-content: space-between; */
               /* 子项在侧轴平分剩余空间 */