flex布局：元素两侧对齐

最新推荐文章于 2024-06-12 09:52:12 发布
原创 最新推荐文章于 2024-06-12 09:52:12 发布 · 1.8k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #css3 #html

文章介绍了如何通过在.top-header中设置display:flex和justify-content:space-between，实现元素在两侧分布的效果。这种方法适用于需要左右对齐的布局设计，同时提醒注意父级元素不应为display:flex。
部署运行你感兴趣的模型镜像

如何实现如下图效果，让元素在两侧分布？

在这里插入图片描述

template代码如下，

<template>
  <div class="top-header">
      <div class="header-left" style="display:inline">left</div>
      <div class="header-right" style="display:inline">right</div>
  </div>
</template>

给 top-header 设置如下即可

.top-header{
    /* border-block-end: 1px solid black;       */
    background-color: #99CCFF;
    height: 65px;
    display: flex;
    justify-content: space-between;
  }

注，如果 top-header 还有父级元素，其父级元素不能是 display: flex;

您可能感兴趣的与本文相关的镜像

ACE-Step

ACE-Step

音乐合成
ACE-Step

ACE-Step是由中国团队阶跃星辰（StepFun）与ACE Studio联手打造的开源音乐生成模型。 它拥有3.5B参数量，支持快速高质量生成、强可控性和易于拓展的特点。 最厉害的是，它可以生成多种语言的歌曲，包括但不限于中文、英文、日文等19种语言

CSS进阶-第二篇：深入 CSS 布局-Flexbox 布局（二）：换行与对齐属性
无
04-10 347
stretch：这是的默认值（当项目在交叉轴方向上没有设置固定高度或宽度时）。Flex 项目会在交叉轴方向上拉伸，以填满容器的整个交叉轴空间。flex-start：Flex 项目会在交叉轴的起始位置对齐。例如，如果交叉轴方向是垂直方向（当为row时），项目会顶部对齐。flex-end：与flex-start相反，Flex 项目会在交叉轴的结束位置对齐。垂直方向上就是底部对齐。center：Flex 项目会在交叉轴上居中对齐。例如在水平导航栏中，按钮在垂直方向上居中显示。baseline。
三步教会你flex弹性盒子（初学者也能学会）
rousongxiaobei_的博客
07-18 2496
二三开启flex布局只需要在外层容器设置display:flex即可。设置后找个外层容器就是一个flex容器。所有子容器自动成为容器成员，称为flex项目。开启flex后，里面的flex项目会自动按照main-axis水平布局。
Flex布局详细解析
前端卷王小白的博客
04-16 1万+
Flex布局完整的详细解析,轻松学会并应用Flex布局
Flex弹性布局
m0_74284133的博客
05-11 1972
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
flex布局优化(两端对齐，从左至右)
秋来九月八
03-20 1万+
flex布局是前端常用的布局方式之一，但在使用过程中，我们总是感觉不太方便，因为日常开发中，大多数时候，我们想要的效果是这样的即左右两端对齐并顶满，小盒子左右间距一致，并且从左至右排布。今天主要就来讨论，通过css，有几种方式来实现，以及它们的优缺点。三种方式中，第二种方式最简单，但兼容性有限；第一种方式代码量不少，兼容性适中，而且的问题严重，最后一种方式，最推荐，虽然有一些计算，并且也要合理分配宽度，但其兼容性最好，基本没啥场景不能适用，正所谓一招鲜，吃遍天。
flex 两端对齐_Flex布局详解，几分钟学会！
weixin_39936134的博客
11-30 2万+
flixible BoxFlex-容器：使用display:flex盒子就是flex容器Flex-项目：flex容器中的子元素就是项目，不包括孙子元素默认主轴方向排列，即横向Flex-容器的属性1、display属性作用：指定flex属性取值：flex | inline-flexflex：将对象作为弹性伸缩盒展示，相当于块级属性，有默认宽度100%inline-flex：将对象作为内联块...
flex布局：两端对齐，自动换行
九日的博客
04-23 7400
需求： 一个大盒子里，小盒子整齐排列，自动换行。 直接上代码： <div class="cont"> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card">&lt...
CSS3 Flex布局：实现内容居中对齐的策略
`flex-start`使元素顶部对齐，`flex-end`使底部对齐，`center`实现垂直居中，`baseline`则依据元素的基线进行对齐。 在实际应用中，结合这些属性，可以灵活地控制div内的内容布局。例如，若希望一个div在容器内水平...
掌握flex布局：快速入门与对齐技巧
在不使用Flex布局时，如在提供的代码中所示，元素会按照传统的块级元素方式进行布局，`.center`类中的子元素会根据各自的宽度占据空间，且没有自动适应性。对比之下，Flex布局的优势就显得更加明显，它使得设计者...
让CSS flex布局最后一行列表左对齐的N种方法(小结)
12-28
引用张鑫旭的一篇文章分享给大家，如果你想进行修改进入链接点到对应的图片生成的链接进入，方可修改。 问题描述 ... <div class=list></div> <div class=list></div> <div class=list></div> ...
关于flex两端对齐的问题
热门推荐
会写代码的心理咨询师
07-19 8万+
flex两端对齐是一个非常容易的写法。 display: flex; flex-direction: row; justify-content: space-between; 但是今天使用，怎么都不好用。总是紧挨着出现在一起。 最后发现是因为其父元素不够宽造成的。父元素原来我设置的内容比较长，所以内容自动撑大了，不需要设置宽度。当内容变少的时候，宽度自动收缩，导致这个元素的宽度不...
用flex布局实现左右两边对齐
liubangbo的专栏
07-26 1万+
有这样的需求，文字左对齐，button右对齐。我们就可以用flex布局很好的实现此需求。 代码如下： <html> <head> <style type="text/css"> .wrapper{ width: 600px; border: 2px solid green; display: flex; flex-wrap: wrap;
flex 两端对齐_Flex 布局
weixin_39639653的博客
11-30 2816
基本概念容器属性.container{ display: flex | inline-flex; }生成容器盒子后，子元素的 float， clear， vertical-align 失效不可用。.container{ flex-direction: row | row-reverse | column | column=reverse }row: 默认值，当前文档流水平方向，由左...
flex布局（分布在两边）（靠左显示）（靠右显示）（元素换行后的对齐方式）（是否换行显示 ）
最新发布
weixin_51494148的博客
06-12 2627
flex布局（分布在两边）（靠左显示）（靠右显示）（元素换行后的对齐方式）（是否换行显示 ）设置元素换行后的对齐方式。两端对齐,中间自适应。设置元素是否换行显示。
Web前端之Style的flex两端对齐、元素自动换行、样式、flow、flex、css
优快云博客主页地址：https://mengjian.blog.youkuaiyun.com/
07-19 2249
Web前端之Style的flex两端对齐、元素自动换行、样式、flow、flex、css
Flex布局
猫老爷
05-17 382
通常我们要将一个大div里面的四个小div并排显示我们就会先想到display属性，positon属性，float属性的结合使用。 Flex布局能更快更好的达到这一要求 行内元素也可以使用Flex布局 直接在大盒子给一个display：flex就可以达到小盒子的并排显示，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。 F...
flex 两端对齐_CSS：前端必会的flex布局，我把布局代码全部展示出来了
weixin_39827585的博客
11-21 1148
进入我的主页，查看更多CSS的分享！首先呢，先去看文档，了解flex是什么，这里不做赘述。当然，可以看下面的代码示例，辅助你理解。一、row将子元素在水平方向进行布局：1. 垂直方向靠顶部，水平方向靠左侧.row-ll { display: flex;/* 定义flex */ flex-direction: row;/* 默认值*/ align-items: flex-start;/* 默认...
flex 两端对齐_果冻公开课第十课：打破传统布局方式的flex（下）
weixin_39771301的博客
11-27 151
其实传统布局方式和人类书写是类似的“从上到下，从左到右，写不下就换行”但经过这些年的发展我们发现这样的方式虽然很好理解但不够灵活于是...动画视频：https://www.zhihu.com/video/1114624428750946304【果冻公开课】前端学习：打破传统布局方式的flex（下）文字解析：其实传统布局方式和人类书写是类似的“从上到下，从左到右，写不下就换行”但经过这些年的发展我们...
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值