HTML5+CSS3_10_flex布局

最新推荐文章于 2024-08-13 16:28:32 发布

泠泠七弦上111

最新推荐文章于 2024-08-13 16:28:32 发布

阅读量161

点赞数 2

分类专栏： HTML5+CSS3 文章标签： html5 css3 前端

本文链接：https://blog.csdn.net/2301_81057751/article/details/140947149

版权

HTML5+CSS3 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

效果图

代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex布局</title>
  <style>
    * {
      margin: 0px;
      padding: 0px;
      list-style: none;
    }

    ul {
      /* 创建flex容器 */
      display: flex;

      /* 主轴对齐方式 justify-content
      flex-start 默认值，弹性盒子从起点开始依次排列
      flex-end 弹性盒子从终点开始依次排列
      center 弹性盒子沿主轴居中排列
      space-between 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
      space-around 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
      space-evenly 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等 */
      justify-content: space-evenly;

      /* 侧轴对齐方式 align-items
      stretch 弹性盒子沿着侧轴线被拉伸至铺满容器
      center 弹性盒子沿侧轴居中排列
      flex-start 弹性盒子从起点开始依次排列
      flex-end 弹性盒子从终点开始依次排列 */
      align-items: center;

      /* 修改主轴方向 flex-direction
      row 水平方向，从左向右（默认）
      column 垂直方向，从上向下
      row-reverse 水平方向，从右向左
      column-reverse 垂直方向，从下向上 */

      /* 弹性盒子换行 flex-wrap
      wrap 换行
      nowrap 不换行（默认） */

      /* 行对齐方式 align-content
      属性值和 justify-content 相同 */

      margin: 100px auto;
      width: 500px;
      height: 500px;
      background-color: #ffee00;
    }

    ul li {
      width: 100px;
      height: 100px;
      background-color: #0ff;
    }

    ul li:nth-child(2) {
      /* 某个弹性盒子侧轴对齐方式 align-self
      属性值和 align-items 相同 */
      align-self: flex-end;

      /* 弹性伸缩比 flex
      作用：控制弹性盒子的主轴方向的尺寸
      属性值：整数数字，表示占用父级剩余尺寸的份数 */
    }
  </style>
</head>

<body>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</body>

</html>