Web:flex布局：flex容器中的四个属性的功能，参数，以及作用

最新推荐文章于 2022-07-24 15:25:06 发布
最新推荐文章于 2022-07-24 15:25:06 发布
阅读量1k 收藏 2
点赞数
分类专栏： Web前端 文章标签： css html html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43356354/article/details/118024889
版权

flex容器中的四个属性的功能/参数

flex容器是具有：display：flex的属性元素
↓ 语法定义

 <head>
    <style type="text/css">
        #box{
            display: flex;
        }
    </style>
  </head>
  <body>
      <div id="box"></div>
  </body>

1.主轴方向与换行方式

元素属性含义
flex-flowrow nowrap默认的，主轴水平方向排列，不换行
flex-flowrow wrap主轴水平方向排列，进行换行
flex-flowcolumn nowrap主轴垂直方向排列，不换行
flex-flowcolumn wrap主轴垂直方向排列，进行换行

① flex-flow：row nowrap 演示

大家可以看到flex-flow：row nowrap参数，只要里面项目增加，里面原本的项目宽度就会被压缩，不会进行换行。

② flex-flow：row wrap 演示

大家可以看到flex-flow：row wrap参数，里面的项目增加了只要超过了原始设置好的宽度，那么这些项目就会进行系统自动换行，移植到下面。

③ flex-flow：column nowrap 演示

大家可以看到flex-flow：column nowrap参数，是垂直方向排列，里面项目增加，里面原本的项目宽度就会被压缩，不会进行换行。

④ flex-flow：column wrap 演示

大家可以看到flex-flow：column wrap参数，是垂直排列，会进行换行，原理都是一样的，只是排列方式不一样。

2.项目在主轴上的对齐方式

元素属性含义
justify-contentflex-start默认起始线
justify-contentflex-end终止线
justify-contentcenter居中
justify-contentspace-between两端对齐
justify-contentspace-around分散对齐
justify-contentspace-evenly平均对齐

① justify-content：flex-start 演示

默认起始线，没有变化

② justify-content：flex-end 演示

大家可以看到justify-content：flex-end参数，把项目移动到了水平排列的终止线，也就是最底部。

③ justify-content：center 演示

大家可以看到justify-content：center参数，把项目移动到了水平线的中间部位，把项目居中了！

④ justify-content：space-between 演示

大家可以看到justify-space-between参数，把项目进行了两端对齐，除了最左边和最右边的外边距，其他的外边距大小都是一致的。

⑤ justify-content：space-around 演示

大家可以看到justify-space-around参数，把项目进行了分散对齐。

⑥ justify-content：space-evenly 演示

大家可以看到justify-space-space-evenly参数，把项目进行了平均对齐，左右的外边距都是一样的。

3.项目在交叉轴的对齐方式

元素属性含义
align-itemsstretch默认拉伸
align-itemsflex-start起始线
align-itemsflex-end终止线
align-itemscenter居中

① align-items stretch 演示

大家可以看到align-items stretch参数，默认在垂直方向是拉伸的。

② align-items flex-start 演示

大家可以看到align-items flex-start参数，上面可以看到垂直方向默认是拉伸的，用flex-start把项目的垂直方向设置在起始线，可以看到变短了。

③ align-items flex-end 演示

大家可以看到align-items flex-end参数，把项目设置在垂直方向终点线上，也就是最下面。

④ align-items center 演示

大家可以看到align-items center参数，把项目定位在了垂直方向的中间部位，把项目居中了。

4.项目在多行容器交叉轴上的对齐方式

元素属性含义
align-contentflex-start起始线
align-contentflex-end终止线
align-contentstretch默认拉伸
align-contentcenter居中

① align-content flex-start 演示

大家可以看到align-content flex-start参数，把多行项目都定位到了起始线上。下面几个参数原理都一样，就不一一演示了，下面来讲一下flex让块级元素居中的用法。

代码块

<!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>flex容器中的四个属性的功能，参数，以及作用</title>
    <style type="text/css">
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      /* 设置元素html字体为10px */
      :root {
        font-size: 10px;
      }
      /* body字体为16px */
      body {
        font-size: 1.6rem;
      }

      /* 定义一个flex容器
      #box {
        border: 1px solid;
        width: 30em;
        height: 30em;
         转变为flex容器
        display: flex;
        设置为水平方向排列，不换行元素
        flex-flow: row nowrap;
      }*/

      /* #box {
         border: 1px solid;
        width: 30em;
        height: 30em;
        display: flex;
         设置为水平方向排列，会进行换行
        flex-flow: row wrap;
      } */

      /* #box {
        width: 30em;
        height: 30em;
        display: flex;
        设置为垂直方向排列，不会进行换行
        flex-flow: column nowrap;
      } */

      /* #box {
        width: 30em;
        height: 30em;
        display: flex;
        设置为垂直方向排列，会进行换行
        flex-flow: column wrap;
      } */

      /* #box {
        width: 30em;
        height: 30em;
        display: flex;
        设置项目在主轴上的对齐方式，默认起始线。
        justify-content: flex-start;
      } */

      /* #box {
        width: 30em;
        height: 30em;
        display: flex;
        设置项目在主轴上的对齐方式，终止线。

        justify-content: flex-end;
      } */

      /* #box {
        width: 30em;
        height: 30em;
        display: flex;
        设置项目在主轴上的对齐方式，居中。

        justify-content: center;
      } */

      /* #box {
        width: 30em;
        height: 30em;
        display: flex;
        设置项目在主轴上的对齐方式，两端对齐。

        justify-content: space-between;
      } */

      /* #box {
        width: 30em;
        height: 30em;
        display: flex;
        设置项目在主轴上的对齐方式，分散对齐。

        justify-content: space-around;
      } */

      /* #box {
        width: 30em;
        height: 30em;
        display: flex;
        设置项目在主轴上的对齐方式，平均对齐。

        justify-content: space-evenly;
      } */
      /*
      #box {
        width: 30em;
        height: 30em;
        display: flex;
        设置项目在交叉轴的对齐方式，默认拉伸。

        align-items: stretch;
      } */

      /* #box {
        width: 30em;
        height: 30em;
        display: flex;
        设置项目在交叉轴的对齐方式，起始线。

        align-items: flex-start;
      } */

      /* #box {
        width: 30em;
        height: 30em;
        display: flex;
        设置项目在交叉轴的对齐方式，终止线。

        align-items: flex-end;
      } */

      /* #box {
        width: 30em;
        height: 30em;
        display: flex;
        设置项目在交叉轴的对齐方式，居中。

        align-items: center;
      } */

      #box {
        width: 30em;
        height: 30em;
        display: flex;
        /* 设置项目在多行容器交叉轴上的对齐方式，起始线。 */
        flex-flow: row wrap;
        align-content: flex-start;
      }

      #box > .boxder {
        border: 1px solid;

        background: lightgreen;
        width: 5em;
        height: 5em;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <div class="boxder">项目1</div>
      <div class="boxder">项目2</div>
      <div class="boxder">项目3</div>
      <div class="boxder">项目4</div>
      <div class="boxder">项目5</div>
      <div class="boxder">项目6</div>
      <div class="boxder">项目7</div>
      <div class="boxder">项目8</div>
      <div class="boxder">项目9</div>
      <div class="boxder">项目10</div>
    </div>
  </body>
</html>

flex简单实现让项目居中

怎么样很简单吧？几行代码搞定。不像之前的定位要设置很多参数，使用flex布局会更加的简洁方便！

代码块

<!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>flex简单实现让项目居中</title>
    <style type="text/css">
      * {
        box-sizing: border-box;
      }
      #box1 {
        border: 1px solid;
        width: 25em;
        height: 25em;
        background: lightpink;
        /* 设为flex容器 */
        display: flex;
        /* 让这个项目在水平线上居中 */
        justify-content: center;
        /* 让这个项目在交叉轴上居中 */
        align-items: center;
      }
      #box2 {
        border: 1px solid;
        width: 15em;
        height: 15em;
        background: limegreen;
      }
    </style>
  </head>
  <body>
    <div id="box1">
      <div id="box2"></div>
    </div>
  </body>
</html>
ZzzWClock
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序开发教程：Flex布局
03-29
Flex布局提供了元素在容器中的对齐，方向以及顺序，甚至他们可以是动态的或者不 ...       微信小程序页面布局方式采用的是Flex布局。 Flex布局，是W3c在2009年提出的一种新的方案，可以简便，完整，响应式的实现...
flex布局中容器的属性及使用
奋斗小强的博客
07-20 1620
今天学习了flex布局，想要了解flex布局，要知道以下几个概念： 容器：如果我们给一个盒子加上了一个属性display:flex，那么这个盒子就是一个容器。 项目：容器中的它里面的直接子元素就是项目。 主轴：在容器中，项目按一定的方向进行排列的，默认是从左到右进行排列，这个排列的方向，我们称为主轴。（可以理解成x轴） 交叉轴：与主轴垂直的轴（可以理解成y轴） &lt;style&gt...
flex布局小结（二）--容器的属性
Ldcrle的博客
06-01 528
flex布局小结（二）--容器的属性 flex布局中对属性的设置基本上分为两大块：容器的属性和项目的属性。 flex容器一般设置有6大属性： flex-direction flex-wrap flex-flow justify-content align-items align-content 参考资料： 阮一峰老师Flex 布局教程：语法篇 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 菜鸟教程：https://www.runoo
Flex布局(基本概念,容器属性,项目属性)
谢谢你的关注
07-24 435
1.所有的元素都可以应用flex布局 2.所有应用flex布局的子元素float,clear及vertical-align属性都将失效
box-shadow属性四个值_Flex布局容器的属性有哪些？
weixin_39584529的博客
11-21 279
flex是Flexible Box的缩写，意思为“弹性布局”，在使用过程中简单、易用、代码较少，在制作网页的时候经常使用这种方法来进行布局。 在使用的过程中任何一个容器都可以指定为Flex布局.{display:flex},行内元素也可以使用Flex布局.box{display:inline-flex;}。当我们将容器设置为Flex布局以后，容器当中的子元素的float、clear等属性会失效。采...
【flex布局快速上手】快速理解flex布局用法，通过常见的四个布局案例解释【详细注释，一看就会】
seeeeeeeeeee的博客
07-20 985
很多小伙伴做项目布局的时候还是会用老方法，定位，margin，浮动等，这样虽然也可以完成项目布局，但是还是有点繁琐了，但是看了网上的帖子，flex布局用的其实没有特别熟悉。我也看了很多帖子，但是基本都是把阮一峰的帖子复制出来发的，或者类似的，只有熟悉的文档功能介绍，但是没有其他案例配合，有时候看的不是很理解。这里呢，我就通过四个小案例，来主要解释一下我们常用的几个flex属性，熟悉了这一些，基本就够用了，并能够立即上手写。如果需要配合图片看详细的，可以去阮一峰的flex教程看阮一峰flex教程。......
水牛01248：flex布局学习笔记
03-29
容器分两个轴,水平的主轴（main axis）和竖直方向的交叉轴（cross axis）,就相当于盒子模型中的xy轴,或者android中的xy轴. (此图片来源于网络，如有侵权，请联系删除! )   基本的布局原则 不像安卓里有那么多的定义...
Re-Flex:可调整大小的Flex布局容器组件，用于高级React Web应用程序
05-02
它旨在以简单的方式解决需要可调整大小的布局的高级React Web应用程序的需求。 这是一个基本的演示： import ReactDOM from 'react-dom' import React from 'react' import { ReflexContainer , ReflexSplitter...
详解CSS中的display:flex||inline-flex属性|56375.pdf
12-12
任何一个容器都可以指定为Flex布局。 flex： 将对象作为弹性伸缩盒显示 inline-flex：将对象作为内联块级弹性伸缩盒显示 flex示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=...
浅谈CSS3中display属性的Flex布局的方法
09-24
本篇文章主要介绍了浅谈CSS3中display属性的Flex布局的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
22 flex布局容器六大属性
Blog of Lytracy
10-04 1531
文章目录3、flex-direction4、flex-wrap5、flex-flow6、justify-content7、align-items8、align-content 3、flex-direction flex-direction 属性指定了主轴线的方向，子元素默认是按照主轴线排列的，所以 flex-direction 也指定了弹性子元素在弹性容器中的排列方式， 有以下四个值： row ：（默认）横向从左到右排列。 row-reverse ：顾名思义，从右向左横向排列，反向。 column ： 纵
flex弹性布局的应用四 之flex属性
The road to success is lonely
06-14 166
flex属性可理解为 ：子元素的长度 主要代码 html <div class="content"> <div class="c-1">1</div> <div class="c-1">2</div> <div class="c-1">3</div> <div class="c-1"&gt...
P90-前端基础高级布局flex-弹性容器属性介绍
Bruce小鬼
02-03 742
P90-前端基础高级布局flex-弹性容器属性介绍 文章目录P90-前端基础高级布局flex-弹性容器属性介绍1.概述2.弹性容器属性介绍2.1.设置弹性元素是否自动换行2.2.设置分配主轴上的空白空间2.3.设置元素在弹性容器辅轴对齐方式2.4.覆盖当前弹性元素上的align-items2.5.设置元素在弹性容器辅轴空白空间的分布3.弹性容器属性设置完整代码 1.概述 这篇文章介绍弹性容器盒中弹性容器相关属性设置，帮助我们完成各种页面布局需求 2.弹性容器属性介绍 2.1.设置弹性元素是否自动换行
关于flex布局的三个参数
大三了啊
03-13 1426
flex :flex-group flex-shirk flex-basis 默认值 1 0 auto flex:auto //11auto ① flex-group 剩余空间索取 默认值为0，不索取 eg:父元素400，子元素A为100px，B为200px.则剩余空间为100 此时A的flex-group为1，B为2， 则A=100px+1001/3; B=200px+1002/3 ② flex-shrik 子元素总宽度大于复制元素如何缩小 父400px,A 200px B 300px AB总宽度
flex属性解释
qq_42420490的博客
07-06 474
flex属性 首先，flex属性是flex-grow, flex-shrink 和 flex-basis的简写， 默认值为0 1 auto。后两个属性可选。 flex-grow：扩展多余空间的使用。 默认为0，即，如果存在剩余空间，也不放大； flex-shrink：缩小比例。 默认为1，即，如果空间不足，该项目将缩小； flex-basis：占据的主轴空间。 浏览器根据这个属性，计算主轴是否有多余空间。 默认值为auto，即项目的本来大小。 ...
PHP:【商城后台管理系统】admin超级管理员后台操作界面部署{无限级菜单}
ZzzWClock的博客
10-15 3050
PHP:【商城后台管理系统】admin超级管理员后台操作界面部署{无限级菜单} 一.超级管理员后台操作界面 二.部署流程 界面部署流程 页眉栏：采用layui 50px 经典蓝 自设置用户信息Session 进行输出用户名称和用户级别 左侧导航栏{无限级菜单} ：采用layui 手风琴和左侧导航框架进行样式设计，通过连接后台数据库导出数据表中数据渲染导航列表，分为一级菜单和二级菜单 主操作区：采用传统 iframe 内联框架进行部署 主操作区高度设置：采用css position 定
PHP:【商城后台管理系统】admin超级管理员后台登录界面部署
ZzzWClock的博客
10-15 3025
PHP:【商城后台管理系统】admin超级管理员后台登录界面部署 一.后台管理登录非空验证 二.后台管理登录用户信息验证 三.注意事项 需要注意储存用户password的时候需要进行加密 存储password的时候 优先选择password_hash 比 md5 更安全 如果使用md5 加密 请加严处理 HTML 代码块 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /
Web:学生课程表表格/用户注册表单
ZzzWClock的博客
06-18 2802
一.学生课程表 1.课程表模样 2.课程表html代码块 <!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
PHP:【商城后台管理系统】部署角色管理，角色添加，菜单权限，删除角色功能
ZzzWClock的博客
10-18 2322
PHP:【商城后台管理系统】部署角色管理，角色添加，菜单权限，删除角色功能 一.角色管理界面 ①首页 ②角色添加 ③角色编辑 ④角色删除 二.部署流程 部署流程 后端采用thinkphp6.0框架，角色管理看似简单，但是在菜单权限这一块是很难得，为什么难呢？因为要设计菜单无限级构造树，还要将无限极菜单构造树递归遍历成二级菜单，这样才好将菜单渲染到视图层，在代码块注释中将有这些问题的解决方案。 前端采用Layui框架 HTML 代码块 <!DOCTYPE html> &lt
display:flex 布局后宽度不起作用
最新发布
07-09
在上述代码中，`.flex-container`是一个`flex`容器，`.flex-item`是容器中的子项。通过设置`.flex-item`的`flex-basis`属性，你可以指定子项的初始宽度。 注意，`flex-basis`属性可以接受其他单位（如像素、百分比...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值