弹性布局

弹性布局的基本属性

　　给父元素添加 display: flex; 之后就是弹性布局

　　flex-direction：指的是排列方式，column 指的是纵向排列，row 指的是横向排列，row-reverse 指的是反向排列

　　flex-wrap: wrap;：指的是自动换行

　　flex-flow：它是 flex-direction 和 flex-wrap 的结合

　　给子元素添加 flex 属性，它是一个混合属性，默认值是 0 1 auto，分别是 放大比例，项目缩小，弹性和自元素的默认精准值。

复制代码
<style>
    #container {
      display: flex;
      /* flex-direction指的是排列方式   column指的是纵向排列  row指的是横向排列   row-reverse指的是反向排列*/
      /* flex-direction: row; */
      /* flex-wrap: wrap; 表示自动换行 */
      /* flex-wrap: wrap; */
      /* flex-flow是 flex-direction 和 flex-wrap的结合 */
      flex-flow: row wrap;
    }

    .item {
      background: #f4f4f4;
      border: #ccc solid 1px;
      padding: 1rem;
      text-align: center;
      /* flex是一个混合属性，默认值是0 1 auto   放大比例  项目缩小  弹性盒子元素的默认精准值 */
      flex: 1;
      margin: 0.75rem;
    }

    .item:first-child {
      flex: 1;
    }
  </style>
复制代码
复制代码
<div id="container">
    <div class="item">
      <h3>Item 1</h3>
    </div>
    <div class="item">
      <h3>Item 2</h3>
    </div>
    <div class="item">
      <h3>Item 3</h3>
    </div>
    <div class="item">
      <h3>Item 3</h3>
    </div>
    <div class="item">
      <h3>Item 3</h3>
    </div>
    <div class="item">
      <h3>Item 3</h3>
    </div>
    <div class="item">
      <h3>Item 3</h3>
    </div>
  </div>
复制代码

对齐方式

　　justify-content：指的是项目在主轴上的对齐方式

　　　　flex-start 指的是左对齐、flex-end 指的是右对齐、center 指的是居中对齐、space-around 可以让项目整齐的分隔开，项与项之间的距离比项与边框的距离大一倍

　　　　space-between 可以让项目与项目之间的距离一样 space-evenly 可以让元素均匀排列。

　　align-items：指的是交叉轴的对齐方式（需要设置高度）
　　　　stretch：默认值、flex-start：交叉轴的起点对齐、flex-end：交叉轴的终点对齐、center：中心点对齐、baseline：按项目的第一行文字进行对齐。
　　align-content：针对多轴线的对齐
　　　　flex-start：交叉轴的起点对齐、flex-end：交叉轴的终点对齐、center：居中对齐、space-around：两根轴线之间的距离相等、space-between：按交叉轴的两端进行对齐、stretch：默认值。
　　flex-basis：可以理解项目占据的主轴空间，所以可以设置跟 width 一样的值，并且有同样的
　　order：更改排序，值越小越靠前
　　align-self：可以对单个 item 进行操作，属性值和 align-items 的属性值一样
复制代码
<!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>felx Align</title>
  <style>
    #container {
      display: flex;
      /* justify-content指的是项目在主轴上的对齐方式   flex-start指的是左对齐 flex-end指的是右对齐 center指的是居中对齐 space-around可以让项目整齐的分隔开，项与项之间的距离比项与边框的距离大一倍 space-between可以让项目与项目之间的距离一样 space-evenly让元素均匀排列 */
      justify-content: space-evenly;
      height: 600px;
      background: #555;
      /* align-items指的是交叉轴的对齐方式（需要设置高度） stretch：默认值 flex-start：交叉轴的起点对齐 flex-end：交叉轴的终点对齐 center：中心点对齐 baseline：按项目的第一行文字进行对齐 */
      align-items: baseline;
      flex-wrap: wrap;
      /* align-content 针对多轴线的对齐方式 flex-start：交叉轴的起点对齐 flex-end：交叉轴的终点对齐 center：居中对齐 space-around：两根轴线之间的距离相等 space-between：按交叉轴的两端进行对齐 stretch：默认值 */
      align-content: stretch;
    }

    .item {
      background: #f4f4f4;
      border: #ccc solid 1px;
      padding: 1rem;
      text-align: center;
      margin: 0.75rem;
      /* 可以理解项目占据的主轴空间，所以可以设置跟 width 一样的值，并且有同样的效果 */
      flex-basis: 100px;
    }

    .item-1 {
      order: 3;
    }

    .item-2 {
      /* 可以对单个item进行操作 其他属性和align-items的属性一样 */
      align-self: flex-end;
      order: 2;
    }

    .item-3 {
      /* order：更改排序，值越小越靠前 */
      order: 1;
    }
  </style>
</head>

<body>
  <div id="container">
    <div class="item item-1">
      <h3>Item 1</h3>
    </div>
    <div class="item item-2">
      <h3>Item 2</h3>
    </div>
    <div class="item item-3">
      <h3>Item 3</h3>
    </div>
  </div>
</body>

</html>
复制代码

 

posted @   守鹤  阅读(104)  评论(0)  编辑  收藏  举报
相关博文：
· animation动画
· jQuery-尺寸、位置操作
· flex-弹性布局
· Flex弹性布局你学废了吗
· css - flex 弹性布局
阅读排行：
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
点击右上角即可分享
微信分享提示