首页 > 博客列表 > 3.24实例演示flex容器中的四个属性的功能，参数，以及作用

博主信息

博文 10

粉丝 0

访问量 9474

专题推荐

弹性项目在主轴上的对齐方式

<!DOCTYPE html>
<html lang="zh-CN">
  <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>弹性项目在主轴上的对齐方式</title>
    <style>
      * {
        box-sizing: border-box;
      }
      :root {
        font-size: 10px;
      }
      body {
        font-size: 1.6rem;
      }

转为flex布局,这个元素就叫flex容器,弹性容器

  .container {
        display: flex;
        height: 20rem;
        height: 100vh;
        border: 1px solid #000;
      }

项目样式: 必须是flex容器的子元素 .flex容器中的子元素自动成flex容器的项目,并且是行内块显示

 .container > .item {
        /* padding: 1rem; */
        /* width: 10rem; */
        height: 4rem;
        background-color: lightblue;
        border: 1px solid #000;
      }

1.单行容器

主轴方向：默认水平
flex-direction: row;
禁止换行
flex-wrap: nowrap;

flex-flow: 主轴方向是否换行;
flex-flow: column nowrap;

.container {
      /* 主轴方向：默认水平，行 */
      flex-direction: row;
      /* 禁止换行 */
      flex-wrap: nowrap;
      /* flex-flow: 主轴方向 是否换行; */
      flex-flow: row nowrap;
    }

2.多行容器

允许换行
flex-flow: row wrap;
主轴垂直
flex-flow: column nowrap;

手机端常用的布局
flex-flow: column nowrap;

.container {
      /* 允许换行 */
      flex-flow: row wrap;
      /* 主轴垂直 */
      flex-flow: column nowrap;
      /* 手机端常用的布局 */
      flex-flow: column nowrap;
    }

```
</style>
</head>
<body>
<div class="container">

<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
<div class="item">item5</div>
<div class="item">item6</div>
<div class="item">item7</div>
<div class="item">item8</div>
<div class="item">item9</div>
<div class="item">item10</div>

</div>
</body>
</html>

#弹性项目在主轴上的对齐方式

<!DOCTYPE html>

<html lang="zh-CN">
<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>弹性项目在主轴上的对齐方式</title>
<style>
* { box-sizing: border-box; } :root { font-size: 10px; } body { font-size: 1.6rem; }
###转为flex布局,这个元素就叫flex容器,弹性容器
.container { display: flex; height: 20rem; border: 1px solid #000; }
###项目样式: 必须是flex容器的子元素
.container > .item { width: 10rem; height: 5rem; background-color: lightcyan; border: 1px solid #000; }
###设置项目在主轴的对齐方式的前提是: 主轴上存在剩余空间
- 1. 将所有项目看成一个整体来处理
justify-content: flex-start; justify-content: flex-end; justify-content: center;
- 2.将所有项目看成一个个独立的个体来处理
- 二端对齐
justify-content: space-between;
- 分散对齐
justify-content: space-around;
- 平均对齐
justify-content: space-evenly;

###项目在交叉轴上的对齐方式: align-items
.container { align-items: stretch; align-items: flex-start; align-items: flex-end; align-items: center; }
</style>
</head>
<body>
<div class="container">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
</div>
</body>
</html>

弹性项目多行容器主轴中的对齐方式

多行容器中对齐时,主轴是没有剩余空间的,为什么?有剩余空间就不换行
换行后,如果需要设置对方方式,就要求交叉轴上必须要有剩余空间

    .container {
        flex-flow: row wrap;
        align-content: stretch;

将交叉轴上所有项目看成一个整体

        align-content: flex-start;
        align-content: flex-end;
        align-content: center;

看成个体

二端对齐
align-content: space-between;
分散对齐
align-content: space-around;

平均对齐
align-content: space-evenly;
</style>
</head>
<body>
<div class="container">

<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
<div class="item">item5</div>
<div class="item">item6</div>
<div class="item">item7</div>
<div class="item">item8</div>
<div class="item">item9</div>
<div class="item">item10</div>
<div class="item">item11</div>
<div class="item">item12</div>

</div>
</body>
</html>

批改老师：

天蓬老师

批改状态：合格

老师批语：

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

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

0条评论

作者最新博文

第一天作业

2021-03-19 16:45:16