flex布局-实现弹性元素的各种排列

已于 2023-07-07 15:33:12 修改
阅读量205 收藏 2
点赞数 1
文章标签： html html5 css
于 2023-07-07 15:19:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_63943166/article/details/131589982
版权

骰子布局样式

单个点

flex容器

.flex-container{
            width: 400px;
            height: 400px;
            background-color: deepskyblue; 
            
            display: flex; /*将盒子变成弹性容器*/
}

<div class="flex-container">
        <div class="flex-items"></div>
    </div>

1.左上

左上

  1. 主轴为横轴
/*左上是默认样式，弹性容器不用再添加其他属性*/
  1. 主轴为纵轴
flex-direction: column;

2.左中

左中

  1. 主轴为横轴
 justify-content: center;
  1. 主轴为纵轴
flex-direction: column;
align-items: center;

3.右上

右上

  1. 主轴为横轴
 justify-content: flex-end;
  1. 主轴为纵轴
 flex-direction: column;
 align-items: flex-end;

4.左中

左中

  1. 主轴为横轴
align-items: center;
  1. 主轴为纵轴
 flex-direction: column;
 justify-content: center;

5.中中

中中

  1. 主轴为横轴
 justify-content: center;
 align-items: center;
  1. 主轴为纵轴
 flex-direction: column;
 justify-content: center;
 align-items: center;

6.右中

右中

  1. 主轴为横轴
 justify-content: flex-end;
 align-items: center;
  1. 主轴为纵轴
 flex-direction: column;
 justify-content: center;
 align-items: flex-end;

7.左下

左下

  1. 主轴为横轴
 align-items: flex-end;
  1. 主轴为纵轴
 flex-direction: column;
 justify-content: flex-end;

8.中下

中下

  1. 主轴为横轴
 justify-content: center;
 align-items: flex-end;
  1. 主轴为纵轴
 flex-direction: column;
 justify-content: flex-end;
 align-items: center;

9.右下

在这里插入图片描述

  1. 主轴为横轴
 justify-content: flex-end;
 align-items: flex-end;
  1. 主轴为纵轴
 flex-direction: column;
 justify-content: flex-end;
 align-items: flex-end;

两个点

flex容器

.flex-container{
            width: 400px;
            height: 400px;
            background-color: deepskyblue; 
            
            display: flex; /*将盒子变成弹性容器*/
}

<div class="flex-container">
        <div class="flex-items"></div>
        <div class="flex-items"></div>
    </div>

1.左上，右上

在这里插入图片描述

  1. 主轴为横轴

弹性父元素的css样式

justify-content: space-between;

2.左上，左下

在这里插入图片描述

  1. 主轴为纵轴

弹性父元素的css样式

 flex-direction: column;
 justify-content: space-between;

3.左下，右下

左下，右下

  1. 主轴为横轴

弹性父元素的css样式

 justify-content: space-between;
  align-items: flex-end;

4.左上，右下

左上，右下

  1. 主轴为纵轴

弹性父元素的css样式

flex-direction: column;
 justify-content: space-between;
 align-items: flex-end;

5.中上，中下

中上，中下
2. 主轴为纵轴

弹性父元素的css样式

 flex-direction: column;
 justify-content: space-between;
 align-items: center;

6.对角1

对角1

  1. 主轴为横轴

弹性子元素的css样式

.flex-items:nth-child(2){
 align-self: center;
}
  1. 主轴为纵轴

弹性父元素的css样式

flex-direction: column;

弹性子元素的css样式

.flex-items:nth-child(2){
 align-self: center;
}

7.对角2

对角2

  1. 主轴为横轴

弹性父元素的css样式

justify-content: space-between;

弹性子元素的css样式

.flex-items:nth-child(2){
 align-self: flex-end;
}
  1. 主轴为纵轴

弹性父元素的css样式

flex-direction: column;
justify-content: space-between;

弹性子元素的css样式

.flex-items:nth-child(2){
 align-self: flex-end;
}

三个点

<div class="box">
        <div class="column"></div>
        <div class="column"></div>
        <div class="column"></div>
    </div>

1.对角

在这里插入图片描述

  1. 主轴为横轴

弹性子元素的css样式

.flex-items:nth-child(2){
      align-self: center;
}
.flex-items:nth-child(3){
       align-self: flex-end;
}
  1. 主轴为纵轴

弹性父元素的css样式

flex-direction: column;

弹性子元素的css样式

.flex-items:nth-child(2){
      align-self: center;
}
.flex-items:nth-child(3){
       align-self: flex-end;
}

四个点

1.四角

四角

<div class="box">
        <div class="column">
          <span class="item"></span>
          <span class="item"></span>
        </div>
        <div class="column">
          <span class="item"></span>
          <span class="item"></span>
        </div>
 </div>

.box {
            width: 400px;
            height: 400px;
            background-color: deepskyblue;
			display: flex;
			flex-wrap: wrap;
			align-content: space-between;
  }

.column {
            flex-basis: 100%;
            display: flex;
            justify-content: space-between;
}

.item{
            width: 100px;
            height: 100px;
            background-color: chartreuse;
 }

五个点

对角5

<div class="box">
        <div class="column">
          <span class="item"></span>
          <span class="item"></span>
        </div>
        <div class="column items">
          <span class="item "></span>
        </div>
        <div class="column">
          <span class="item"></span>
          <span class="item"></span>
        </div>
      </div>


.box {
            width: 400px;
            height: 400px;
            background-color: deepskyblue;
            display: flex;
            flex-wrap: wrap;
            align-content: space-between;
        }

.column {
            flex-basis: 100%;
            display: flex;
            justify-content: space-between;
        }

.item{
            width: 100px;
            height: 100px;
            background-color: chartreuse;
        }
.items{
            justify-content:center;
        }

六个点

flex容器

两种情况的css样式是一样的，只是在html上有一一点点差别。

弹性父元素的css样式

.flex-container{
            width: 400px;
            height: 400px;
            background-color: deepskyblue;
            
            display: flex;
            flex-wrap: wrap;
            align-content: space-between;
            
        }

弹性子元素的css样式


        .flex-items{
            flex-basis: 100%;
            display: flex;
            justify-content: space-between;
            
        }   
        .item{
            width: 100px;
           height: 100px;
            background-color: chartreuse;
        }

1.左右各3

左右各3

<div class="flex-container">
        <div class="flex-items">
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="flex-items">
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="flex-items">
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>

2.上下各3

上下各3

<div class="flex-container">
        <div class="flex-items">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="flex-items">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
 </div>
又双叒叕778
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
div+flex移动端布局
樊小勇的博客
04-15 205
移动端布局 1.我们要进行移动端页面的开发设计第一肯定想到的是弹性盒子 2.弹性盒子flex 3.div和flex的配合使用 移动端页面 1.移动端需要引入一个样式，meta 随便打开一个网站F12调成手机模式，复制meta <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1....
弹性布局排列
The_Fuir_ye的博客
05-17 206
弹性布局排列 1,类似于以下排列样式 2.父级样式 display: flex; flex-wrap: wrap; justify-content: space-between; 3.子级样式 width: calc(calc(100% / 4) - 50px);
div的flex布局，简单介绍
zp315379004的博客
05-31 1726
.main-box{ display: flex; flex-direction: row; align-items: center; justify-content: center; }
flex 弹性布局，最后一行数量不足一行 列表项目左对齐的解决办法
qq_41426442的博客
10-14 1586
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> .listBox{ width:1200px; height:600px; margin: 0 auto; border:1px solid red; display: flex; f.
Flex布局
pscool的博客
05-11 4107
笔记来源：尚硅谷 Web 前端 HTML5&CSS3 初学者零基础入门全套完整版 文章目录弹性盒简介1、基本概念弹性盒弹性容器弹性元素2、弹性容器的属性主轴属性排列方式：flex-direction自动换行：flext-wrap简写属性：flex-flow空白空间：justify-content辅轴属性辅轴对齐：align-items空白空间：align-content3、弹性元素的属性伸展系数：flex-grow缩减系数：flex-shrink基础长度：flex-basis简写属性：flex排.
弹性布局-flex布局.zip
05-18
Flex布局，全称为“Flexible Box”或“弹性盒布局”，是CSS3中一种用于处理容器内元素布局的模型。它旨在提供一个更加灵活、响应式的布局方式，尤其适用于多设备环境，如手机、平板电脑等移动设备。在传统布局模式下...
flex布局 父元素属性之 justify-content 主轴上子元素的排列方式
01-07
 justify-content：设置主轴上子元素的排列方式 justify-content 的属性值如下： 属性值 含义 flex-start 从主轴的头部开始排，主轴：x轴 左对齐；y轴 顶部对齐（默 认值） flex-end 从主轴的尾部开始排，...
flex弹性盒布局最后一行左对齐的实现思路
01-19
使用flex布局，如果是九宫格的话正好可以平分，如图 如果是我们只需要八块，如图 但是我们想让最后一块左对齐，依次排列，需要在元素的父级增加伪元素after，如图 <li></li> <li></li> <li></li> <li>...
flex布局-携程网-移动端
02-23
`开启Flex布局，`.item`作为子元素，可以设置`flex-grow`、`flex-shrink`和`flex-basis`来调整它们在容器内的相对大小和弹性行为。 总而言之，这个“flex布局-携程网-移动端”的项目，通过深入理解和巧妙运用Flex...
flex布局Flex实现常见布局的汇总
04-11
先简单介绍一下，要使用flex布局，需要先给一个容器元素设置display:flex让它变成flex容器。 然后其所有的直接子元素就变成flex子元素了，在flex里存在两根轴，叫主轴和交叉轴，互相垂直，主轴默认水平，flex子元素...
uniapp之弹性布局中最后一行元素宽度不足时左对齐的几种方法
我心坚持
11-04 1305
没有对齐之前： 对齐之后： 1.总数不定且列数不定 在父元素上加入伪元素： ::after .parent::after { content: ''; flex:auto; } flex:auto用于占满最后一行的剩余宽度，中间就会没有任何间距。所以可以给每个子元素设置margin以分割出缝隙。 2、添加几个空view在元素末尾 不设置高度 利用每个list数组的长度，进行取余数 <view if="List.lenght%3==1"> <view style="
HTML的三种布局：DIV+CSS、FLEX、GRID
weixin_30902675的博客
12-30 493
Div+css布局 也就是盒子模型，有W3C盒子模型，IE盒子模型。盒子模型由四部分组成margin、border、padding、content。 怎么区别这两种模型呢，区别在于w3c中的width是content的宽，IE的width是content+border+padding。 具体的可以看下面的图： W3C盒子（标准盒子）： IE盒子： Fle...
flex实现div/li等水平居中布局
一只爱吃糖的小羊
05-12 8915
flex大家在开发的时候应该用到过，实现块级元素水平居中布局的方法挺多，本文讲一下不用浮动，用flex实现div水平布局，效果图： 为了方便，本文使用li举例，div同理。代码如下： /*css*/ .ulBox{ display: flex; justify-content: center; width: 100%;padding: 20px;bord...
Flex布局全面介绍
qq_59305028的博客
07-17 8249
Flex基本介绍
Flex布局详解，手把手教你如何使用Flex布局
u014328243的博客
07-15 7640
在线演示 基础框架HTML为 <div class="videos"> <div class="videos-index videos-1"></div> <div class="videos-index videos-2"></div> <div class="videos-index videos-3"></div>
【移动端网页布局】flex 弹性布局子项目属性 ③ ( order 子项目属性 - 设置子项目元素排列顺序 | 代码示例 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
05-13 2110
一、order 子项目属性 - 设置子项目元素排列顺序 二、代码示例 - 设置子项目元素排列顺序
Flex布局应用--盒子四角放置
J1756465965的博客
03-07 659
flex布局应用----四角布局。 将盒子实现放到四个角落
flex实现四个元素分布在盒子的四个角
小羊的博客
03-08 2581
使用flex布局让四个元素分别分布在盒子的四个角
前端：布局（用于div中有多行元素，一行只显示四个，最左或最右要紧贴父div，最顶层和最底层也要紧贴父div）
最新发布
weixin_46001736的博客
01-17 1082
前端：布局（用于div中有多行元素，一行只显示四个，最左或最右要紧贴父div，最顶层和最底层也要紧贴父div）
flex实现弹性布局
09-28
flex是CSS3中用于实现弹性布局的一组属性。弹性布局通过设置容器的display属性为flex来启用。flex属性是flex-grow、flex-shrink和flex-basis属性的简写形式，其中flex-grow表示项目的放大比例、flex-shrink表示项目的缩小比例、flex-basis表示项目的基准值。通过设置这些属性，可以实现弹性布局中项目的伸缩效果。 此外，还有一些其他的属性用于设置容器上的弹性布局，包括flex-direction、flex-wrap、flex-flow、justify-content、align-items和align-content等属性。flex-direction用于设置项目的排列方向，flex-wrap用于设置项目的换行方式，flex-flow可以同时设置flex-direction和flex-wrap属性，justify-content用于设置项目在主轴上的对齐方式，align-items用于设置项目在交叉轴上的对齐方式，align-content用于设置多根轴线的对齐方式。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值