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

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>弹性项目在主轴上的对齐方式</title>
  8. <style>
  9. * {
  10. box-sizing: border-box;
  11. }
  12. :root {
  13. font-size: 10px;
  14. }
  15. body {
  16. font-size: 1.6rem;
  17. }

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

  1. .container {
  2. display: flex;
  3. height: 20rem;
  4. height: 100vh;
  5. border: 1px solid #000;
  6. }

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

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

1.单行容器

  • 主轴方向:默认水平
    flex-direction: row;
  • 禁止换行
    flex-wrap: nowrap;
  • flex-flow: 主轴方向 是否换行;
    flex-flow: column nowrap;
    1. .container {
    2. /* 主轴方向:默认水平,行 */
    3. flex-direction: row;
    4. /* 禁止换行 */
    5. flex-wrap: nowrap;
    6. /* flex-flow: 主轴方向 是否换行; */
    7. flex-flow: row nowrap;
    8. }

    2.多行容器

  • 允许换行
    flex-flow: row wrap;
  • 主轴垂直
    flex-flow: column nowrap;
  • 手机端常用的布局
    flex-flow: column nowrap;
    1. .container {
    2. /* 允许换行 */
    3. flex-flow: row wrap;
    4. /* 主轴垂直 */
    5. flex-flow: column nowrap;
    6. /* 手机端常用的布局 */
    7. flex-flow: column nowrap;
    8. }
    ```
    </style>
    </head>
    <body>
    <div class="container">
    1. <div class="item">item1</div>
    2. <div class="item">item2</div>
    3. <div class="item">item3</div>
    4. <div class="item">item4</div>
    5. <div class="item">item5</div>
    6. <div class="item">item6</div>
    7. <div class="item">item7</div>
    8. <div class="item">item8</div>
    9. <div class="item">item9</div>
    10. <div class="item">item10</div>
    </div>
    </body>
    </html>
  1. #弹性项目在主轴上的对齐方式

<!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>

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

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

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

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

  1. align-content: flex-start;
  2. align-content: flex-end;
  3. align-content: center;

看成个体

  • 二端对齐
    align-content: space-between;
  • 分散对齐
    align-content: space-around;
  • 平均对齐
    align-content: space-evenly;
    </style>
    </head>
    <body>
    <div class="container">
    1. <div class="item">item1</div>
    2. <div class="item">item2</div>
    3. <div class="item">item3</div>
    4. <div class="item">item4</div>
    5. <div class="item">item5</div>
    6. <div class="item">item6</div>
    7. <div class="item">item7</div>
    8. <div class="item">item8</div>
    9. <div class="item">item9</div>
    10. <div class="item">item10</div>
    11. <div class="item">item11</div>
    12. <div class="item">item12</div>
    </div>
    </body>
    </html>

更多相关文章

  1. css之flex容器
  2. 0324作业-flex布局
  3. flex布局:flex容器中的四个属性的功能,参数,以及作用
  4. 圣怀布局,网格(容器,项目,单元,轨道,间距,排列,位置,对齐),隐式
  5. flex 基础
  6. grid对齐方式以及简单实战
  7. flex容器的认识
  8. flex元素常用属性
  9. flex容器与项目的常用属性

随机推荐

  1. Android Drawable Resources系列7:
  2. Titanium中Android模块开发指南(中文)
  3. Android存储权限之深入浅出
  4. 9月26号 Android(安卓)SQLiteDatabase 的
  5. React Native开发——Image组件
  6. Android Media (Audio) Framework Analys
  7. Android编程实现屏幕自适应方向尺寸与分
  8. 20172321 2017-2018-2 《程序设计与数据
  9. Android图形系统分析与移植 -- 五、Andro
  10. Android(安卓)Fragment---创建Fragment