h5学习笔记 flex space-between 实现左右对齐布局

最新推荐文章于 2024-05-05 19:46:18 发布

这个一看就是装裱

最新推荐文章于 2024-05-05 19:46:18 发布

阅读量587

点赞数

本文链接：https://blog.csdn.net/cfhgcvb/article/details/87722099

版权

本文介绍了如何使用flex布局中的`justify-content: space-between`属性实现左右对齐的布局效果。通过在小程序页面中设置样式，展示了在有两个子元素的情况下，如何达到理想布局。同时，添加第三个元素（文本）依然能保持左右对齐，这种方法简单高效。

摘要由CSDN通过智能技术生成

今天在尝试拼小程序界面的时候一直想换种口味。于是想使用flex布局，小程序支持flex也比较好。今天遇到一个问题就是要实现一个一左，一右，方式布局。之前习惯了用绝对布局的方式，可以将右边的元素实现right 0 处理。细心想了一既然使用flex布局肯定可以实现。找了一些资料看，space-between 在两个子元素下可以实现左右对齐的效果。
下面，看一下实现。创建小程序页面，对文件编写如下的方式。
在一个view 里面包了两个子元素。

<view class='ui-group'>  <view class='ui-box-item'></view>  <view class='ui-box-item'></view> </view>
  
  
  
   1
   2
   3

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

这个一看就是装裱

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

大前端学习笔记--持续随缘更新

JackieDYH的博客

02-10

1206

目录 0210--前端知识&HTML常用标签 0210--前端知识&HTML常用标签 1、浏览器及内核介绍： chrome谷歌：特点——简洁、快速、安全内核——webkit,Blink 费用——收费 Firefox火狐——Mozilla公司：特点——非盈利、Gecko项目开源内核——Gecko Safari苹果——苹果...

前端学习笔记 - 移动端Web开发

fengxm0309的博客

10-18

1097

移动端基础浏览器现状 PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样兼容移动端主流浏览器，处理Webkit内核浏览器即可

参与评论您还未登录，请先登录后发表或查看评论

h5左中右经典布局demo

12-12

左中右结构经典布局demo，文字，元素居中示范等，header，content，footer结构demo

h5学习笔记：flex space-between 实现左右对齐布局

最新发布

weixin_51676646的博客

05-05

1319

flex布局

HTML常用显示内容标签

赵广陆

04-18

5419

1 什么是 HTML？需求：（生活中遇到问题）随着技术的发展，信息量的增大网页的数据信息没有办法完美的、漂亮的展现到用户的面前。意义:(作用)： HTML是一种专门对网页信息进行规范化展示的语言。把网页的信息格式化展现的语言 HTML(Hyper Text Markup Language)：超文本标记语言超文本：文本信息、图片、声音、视频、超链接等标记：标签的...

移动端布局学习笔记

橘颂的博客

07-29

553

学习笔记

移动端布局笔记

nuomi_w的博客

11-28

323

1.移动web流式布局 1.移动端基础兼容移动端主流浏览器，处理Webkit内核浏览器即可。学会用谷歌浏览器模拟手机界面及调试。 2.视口视口（viewport）就是浏览器显示页面内容的屏幕区域。视口可分为布局视口、视觉视口和理想视口。 2.1布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。 iOS,Android基本都将这个视口分辨率设置为980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般

解决flex布局space-between最后一行左对齐的方法

11-20

首先看代码和效果↓ <style> .main { outline: 1px solid; display: flex; justify-content: space-between; flex-wrap: wrap; } .main>div { width: 100px; height: 100px; margin-bottom: 10px; backg

css盒子模型flex中属性space-around和space-between的本质理解！！！

qq_63116916的博客

03-06

1571

每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。其实可以从命名来理解，space就是空间，between就是中间的意思，space-between就是把剩余空间均匀分配到子盒子中间，自然而然，最右和最左边的盒子就不给他们空间了，因为中间，什么叫中间？其实可以从命名来理解，space是空间的意思，around是包围的意思，space-around就是平分剩余空间，并把分配到的空间平分到一个子盒子的两侧；相邻子盒子之间，空间相加，自然而然，就会形成最左和最右的空间是子盒子中间空间的一半。

flex布局设置space-between，最后一行有缺省时如何左对齐

djs0513的博客

07-13

2945

使用flex弹性布局，两端对齐是设置justify-content:space-between。但是当一行当中的元素有缺省时，不能自动靠左排列，视觉上不够美观，如下图所示：图示示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin: 0;padding: 0

flex布局使用space-between后最后一行左对齐

izz520的博客

09-25

2413

在布局中，使用了flex的justify-content: space-between属性后，如何让最后一行的元素左对齐，而不是两端对齐

h5页面布局

summer_na的博客

02-27

6889

一、div撑满整个屏幕 1、绝对定位 <style> * { margin: 0; padding: 0; } .main { position: absolute; width: 200px; height: 100%; background: yellowgreen; ...

flex布局对齐方式设置space-between，将最后一行元素左对齐

weixin_45559449的博客

03-19

6957

给盒子设置 justify-content: space-between ，可以均匀排列盒子中的每个元素，首个元素放置于起点，末尾元素放置于终点。达到左右对齐的效果。但当最后一行元素不能铺满盒子时，会在盒子中均分排列，效果并不是我们需要的。盒子设置flex布局，对齐方式设置 justify-content: space-between时，将最后一行元素左对齐，有一下几种方法：特点：适用于任意列数布局，比较简单，缺点是会产生空标签方案：使用循环体循环一整行空元素。宽度为单个元素宽度，高度为0codeh

html5 漂亮的左右布局_IT兄弟连 HTML5教程了解HTML5的主流应用1

weixin_39910963的博客

11-29

388

在很多人眼里，HTML5与互联网营销密切相关，但其实从开发者的角度而言，它是一种网页标准，定义了浏览器语言的编写规范。伴随HTML5标准尘埃落定，浏览器对HTML5特性的逐步支持，再加上国内对HTML5大力的推广与应用，又出现了各种各样的HTML5平台，现在已经是一个富含多元化的市场机会，它强大的Web应用开发能力才让人们不得不转换固有的互联网思维，寻找新的网页解决方案。开始由技术应用转向整个行业...

flex布局——align-items属性垂直之共有flex-start、center、flex-end& justify-content属性水平之space-around、space-between

weixin_44867717的博客

12-04

9923

flex

flex布局两端对齐space-between，解决最后一行不对齐

qq_43432157的博客

01-12

1075

<template> <view class='item-c'> <view class='item'>ccc</view> <view class='item'>ccc</view> <view class='item'>ccc</view> <view class='item'>ccc</view> <view class='item'>ccc<

用 h5写一个flex上中下左右布局

07-13

你可以使用 HTML5 和 CSS 来实现一个基于 flex 的上中下左右布局。下面是一个简单的示例代码： ...<!... ... height: 100%;...这样，你就可以通过调整容器和子元素的样式来实现一个基于 flex 的上中下左右布局。