您现在的位置是:首页 > 正文

flex布局

2024-02-01 04:50:31阅读 2

flex🤒

flex是flexible box的缩写,也叫弹性盒子布局。🤒

1.为什么要flex布局?🤒

​ 在我们常规布局方式(IFC BFC)已经不能满足我们所需要的方式了,因此flex布局也就应运而生。下面来深入学习一下flex布局的相关知识。🤒

2.flex布局🤒🤒🤒

在flex布局中,有水平的主轴(main axis)和垂直的交叉轴(cross axis)。

主轴起点叫main start 终点叫做main end.

交叉轴起点叫做 cross start 终点叫做 cross end.

图一

在这里插入图片描述

3.flex-direction😳😳😳😳

flex-direction改变主轴和交叉轴的指向。也是改变项目的指向。🤒🤒🤒

​ 默认值:row 即:主轴从左到右

还有以下属性😳😳

row-reverse 主轴从右指向左

column 主轴从上到下

column-reverse 主轴从下到上

侧轴则与主轴交换位置😳

4.flex的自动宽度

在说明自动宽度之前,我们先来说明一下width的几个属性:

max-content

min-content

max-content是不管父盒子的宽度,一直像→延申。

min-content表示容器为最小元素的宽度就行


😳当使用flex布局时,子元素总宽度不超过容器宽度的时候,默认子元素宽度就是max-content

😳如果总宽度大于容器宽度的时候,默认子元素宽度就是min-content的宽度。

5.flex指定宽度🧐🧐

在flex布局中,如果子元素需要指定宽度的时候,可以使用flex-basis这个属性。当盒子中还有空余宽度的时候,可以使用flex-grow来分配盒子中的剩余宽度。

6.flex自动缩小🧐🧐

当我们子元素宽度大于容器宽度的时候,容器不会被撑开。而是子元素会缩水,可以通过flex-shrink来指定缩水的大小。默认值为1

7.flex简写🧐🧐🧐🧐

flex:grow shrink basis如果不写的话,默认值就是1。

例子:等分:flex:1 0px

8.对齐方式🧐🧐

主轴-justify-content

  • center
    space-around
  • space-evenly
  • space-between
  • flex-start
  • flex-end

交叉轴-align-items:

  • center
  • flex-start
  • flex-end
  • stretch
  • baseline

多轴–align-content:

只有设置了flex:warp才会生效

  • flex-start:与交叉轴的起点对齐。

    flex-end:与交叉轴的终点对齐。

    center:与交叉轴的中点对齐。

    space-between:与交叉轴两端对齐,轴线之间的间🧐隔平均分布。

    space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。

    stretch(默认值):轴线占满整个交叉轴。

9.换行🧐

flex-warp:warp

默认nowarp

10.order🧐

优先级显示顺序

与边框的间隔大一倍。

stretch(默认值):轴线占满整个交叉轴。

9.换行🧐

flex-warp:warp

默认nowarp

10.order🧐

优先级显示顺序

网站文章

  • java 动态创建类_Java运行时动态生成类几种方式

    最近一个项目中利用规则引擎,提供用户拖拽式的灵活定义规则。这就要求根据数据库数据动态生成对象处理特定规则的逻辑。如果手写不仅每次都要修改代码,还要每次测试发版,而且无法灵活根据用户定义的规则动态处理逻...

    2024-02-01 04:50:24
  • antv图例出现分页_Echarts和highCharts图表使用总结(附AntV)

    Echarts:1.给y轴上间隔线设置成虚线yAxis: {type: 'value',boundaryGap: [0, '100%'],axisLine: {show...

    2024-02-01 04:49:54
  • 「NodeJs」nodejs 定时任务

    nodejs 定时访问网页。

    2024-02-01 04:49:47
  • std::forward()

    std::forward()完美转发。

    2024-02-01 04:49:38
  • freekan电影系统后台无法登录解决方法

    freekan电影系统后台无法登录解决方法

    这个freekan电影系统真的比较挑主机,不只是试了许多主机无法安装,有时安装上了明明账号密码正确还登录不上,但又找不到更好用的电影系统。幸亏我用的是老薛主机,售后非常给力,联系他们后立马就解决了,他...

    2024-02-01 04:49:32
  • SpringMvc+Mybatis +Oracle

    +Mybatis入门笔记http://www.cnblogs.com/hellokitty1/p/5216025.htmljsp运行原理JSP运行原理及运行过程https://blog.csdn.net/hanxuemin12345/article/details/23831645转载于:https://www.cnblogs.com/maowuyu-xb/p/9126367....

    2024-02-01 04:49:02
  • EasyExcel——自定义注解、实现动态获取下拉框内容

    EasyExcel——自定义注解、实现动态获取下拉框内容

    主要展示了在使用easyexcel导出过程中如何从数据库表获取动态下拉框内容,以及和固定下拉框内容的对比

    2024-02-01 04:48:56
  • Redis集群

    Redis集群

    Redis集群是一个提供在多个Redis节点间共享数据的程序集,可以支持多个Master。

    2024-02-01 04:48:50
  • 记一次生产环境GitLab服务和数据迁移到阿里云和GitLab版本升级

    记一次生产环境GitLab服务和数据迁移到阿里云和GitLab版本升级

    GitLab是一个用于管理代码的仓库系统,他是一个开源项目,使用Git作为代码管理工具,并在此基础上搭建起来的Web服务,可通过Web界面进行访问公开的或者私人项目。它拥有与Github类似的功能,能够浏览源代码,管理代码缺陷和注释。.........

    2024-02-01 04:48:20
  • SpringBoot整合Elasticsearch-elasticsearch-rest-high-level-client

    前言在前面几篇文章中演示ES安装时对外暴露有两个端口,一个是9200,一个是9300,这里9300是一个TCP端口,ES集群环境下也是通过9300端口通信的,是长连接的形式通信的,这里不推荐使用Spr...

    2024-02-01 04:48:13