CSS3 弹性盒子(Flex Box)(一)

最新推荐文章于 2023-07-20 13:26:04 发布

桃花朵朵开3

最新推荐文章于 2023-07-20 13:26:04 发布

阅读量131

点赞数

分类专栏：小白笔记文章标签： css3 html

本文链接：https://blog.csdn.net/qq_48445738/article/details/109188184

版权

小白同时被 2 个专栏收录

57 篇文章 0 订阅

订阅专栏

笔记

36 篇文章 0 订阅

订阅专栏

CSS3 弹性盒子(Flex Box)

弹性盒子是 CSS3 的一种新的布局模式。

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

CSS3 弹性盒子内容

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置** display 属性的值为 flex 或 inline-flex**将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

使用（盒子分主轴（x）和副轴（y））

属性	描述
flex	复合属性。设置或检索伸缩盒对象的子元素如何分配空间。
flex-grow	设置或检索弹性盒的扩展比率。
flex-shrink	设置或检索弹性盒的收缩比率
flex-basis	设置或检索弹性盒伸缩基准值。
flex-flow	复合属性。设置或检索伸缩盒对象的子元素排列方式。
flex-direction	设置或检索伸缩盒对象的子元素在父容器中的位置。
flex-wrap	设置或检索伸缩盒对象的子元素超出父容器时是否换行。
align-content	设置或检索弹性盒堆叠伸缩行的对齐方式。
align-items	设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
align-self	设置或检索弹性盒子元素自身在侧轴（纵轴）方向上的对齐方式。
justify-content	设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
order	设置或检索伸缩盒对象的子元素出現的順序。

给哪个元素设置 display: flex; 代表的是他的子元素使用弹性布局给元素使用弹性布局之后会让他的子元素沿着主轴方向依次排列

默认的主轴方向是x轴

    弹性布局的特点 : 保证了子元素在父元素的主轴方向永远不会溢出  会自动伸缩
    弹性布局也叫作伸缩布局

现有页面结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
 <style>
        ul {
            list-style: none;
            padding: 0;
            width: 600px;
            height: 500px;
            border: 1px solid black;
        }
        li {
           width: 150px;
           background-color: #0f0;        
        }
         </style>
        </head>
<body>
 <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    </body>
</html>

在这里插入图片描述

不用浮动把三个li盒子并排

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
      ul {
          list-style: none;
          padding: 0;
          width: 600px;
          height: 500px;
          border: 1px solid black;
          display: flex;
            /* 让该元素下的子元素弹性布局
              给元素使用弹性布局之后  会让他的子元素沿着主轴方向依次排列
              默认的主轴方向是x轴
           */
          justify-content: space-around;
           /* 设置沿着主轴居中显示 
              属性值 : 
                  center : 在主轴方向居中显示
                  flex-start : 在主轴起点方向排列  默认值
                  flex-end  : 再主轴终点方向排列
                  space-around : 元素和元素之间有间隙  两端也有 而且 元素间的间隙是两端的两倍
                  space-between : 只有元素与元素之间有间隙  两端没有
          */
      }
      
      li {
          width: 150px;
          background-color: #0f0;
      }
  </style>
</head>

<body>
  <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
  </ul>
</body>

</html>

在这里插入图片描述

让它纵向排列

<style>
flex-direction: column;
			 /* row： 主轴与行内轴方向作为默认的书写模式。即横向从左到右排列（左对齐）。
            	 row-reverse： 对齐方式与row相反。
              column： 主轴与块轴方向作为默认的书写模式。即纵向从上往下排列（顶对齐）。
               column-reverse： 对齐方式与column相反。  */
</style>

在这里插入图片描述

桃花朵朵开3

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 弹性盒子(Flex Box)(一)

CSS3 弹性盒子(Flex Box)弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。CSS3 弹性盒子内容弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置** display 属性的值为 flex
复制链接

扫一扫