1.flex容器属性

各属性区别：

这里看不懂没关系，你先看下面的，然后再看这个总结

1.1flex-direction

排列属性：
改变各元素的排列方向，有四个属性如下：
row | row-reverse | column | column-reverse
同学们可以在23行代码修改属性值，观察各属性值的变化

<!DOCTYPE html>
<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>
        *{
          padding: 0;
          margin: 0;
          box-sizing: border-box;
        }
        .contain{
          flex-direction: column;
          height: 16rem;
          background-color: antiquewhite;
          border: 1px solid red;
          display: flex;
        }
        .contain>.item{
          background-color:aqua;
          color: red;
          border: solid royalblue;
          width: 10em;
          /* align-self: flex-end; */
        }
  </style>
</head>
<body>
   <div class="contain">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
   </div>
</body>
</html>

要点如下：
当你使用flex-direction: column;的时候，align-contain就不管用了，因为这时候你的横轴和竖轴交换了位置

1.2justify-content
排列属性：

start,center,end,space-between,space-evenly,space-around

space-between：flex items 之间的距离相等，与main start、main end两端对齐
space-evenly: flex items 之间的距离相等,flex items与main start 、main end 之间的距离等于flex items之间的距离
space-around :flex items 之间的距离相等,flex items与main start 、main end 之间的距离等于flex items之间的距离的一半

同学可以在74行更换属性值，看个属性值的作业是什么

<!DOCTYPE html>
<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>
        *{
          padding: 0;
          margin: 0;
          box-sizing: border-box;
        }
        .contain{
          justify-content: center;
          height: 16rem;
          background-color: antiquewhite;
          border: 1px solid red;
          display: flex;
        }
        .contain>.item{
          background-color:aqua;
          color: red;
          border: solid royalblue;
          width: 10em;
          /* align-self: flex-end; */
        }
  </style>
</head>
<body>
   <div class="contain">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
   </div>
</body>
</html>

1.3align-items

排列属性：

normal,flex-start,flex-end,center,baseline
注意：align-items:竖轴单个布局，就是竖轴上只能有一个元素（或者多个元素是一个整体）
同学可以更改124排的属性，来看每个属性的变化

<!DOCTYPE html>
<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>
        *{
          padding: 0;
          margin: 0;
          box-sizing: border-box;
        }
        .contain{
          flex-direction: column;
          align-items: flex-end;
          background-color: antiquewhite;
          border: 1px solid red;
          display: flex;
        }
        .contain .item{
          background-color:aqua;
          color: red;
          border: solid royalblue;
        }
  </style>
</head>
<body>
   <div class="contain">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
   </div>
</body>
</html>

align-content(几乎不用)

排列属性：
stretch,flex-start,flex-end,center,space-between,space-evenly,space-around
html

flex-wrap

排列属性：
wrap和nowrap

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

仿PHP中文网右侧布局

2022-07-18 14:56:59