用Flex轻松布局

最新推荐文章于 2024-03-26 17:18:41 发布
最新推荐文章于 2024-03-26 17:18:41 发布
阅读量618 收藏
点赞数 1
分类专栏： 专题技术文献
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44074811/article/details/87867812
版权 
开发工具与关键技术：DW/浏览器；前端技术
作者：黄启浩
撰写时间：2019.02.15

小白们遇到以下情况，想要把4个盒子并排显示，是不是又要用浮动了？

各位小白先停下来，不要急！先看样式：

这里4个盒子是各占一行的，大家看好了

现在不用浮动，直接flex成并排显示，justify-content: flex-start就是这4个盒子按照主轴的方向（默认主轴的方向就是水平方向）从头到尾顺序排列（左对齐）。

是不是get到了什么呢？赶紧动手试试把！

 

 

 

 

 

感谢大家的浏览，如有疑问可在评论留言哦

 

 

 

 

 

 

 

 

菜园大萝卜
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Flex 布局
夜阑珊妖妖
08-14 175
flex布局学习笔记： 基础代码： <ul> <li>一</li> <li>二</li> <li>三</li> <li>四</li> <li>五</li> </ul> <style> * { margin: ...
flex 布局
weixin_53571388的博客
03-11 263
flex是弹性布局，css3新增语法， 我们在开发移动端时会大量用到，pc端考虑到浏览器兼容性不好 flex 唯一的缺点就在于，它不支持低版本的 IE 浏览器。 一、Flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; } 行内元素也可以使用 Flex 布局。 .box{ display: inline-flex; } Webkit 内核的
【Vue 页面+flex布局 】一行内显示4个元素，超出4个换行，每一行的最后一个去掉marginRight属性
最新发布
蓝胖子的博客
03-26 1539
【Vue 页面+flex布局 】一行内显示4个元素，超出4个换行，每一行的最后一个去掉marginRight属性
flex 的 三个参数 flex:1 0 auto
weixin_44433499的博客
07-14 1万+
flex属性 是 flex-grow、flex-shrink、flex-basis三个属性的缩写。 flex-grow：定义项目的的放大比例； 默认为0，即 即使存在剩余空间，也不会放大； 所有项目的flex-grow为1：等分剩余空间（自动放大占位）； flex-grow为n的项目，占据的空间（放大的比例）是flex-grow为1的n倍。 flex-shrink：定义项目的缩小比例； 默认为1，即 如果空间不足，该项目将缩小； 所有项目的flex-shrink为1：当空间不足时，缩小的比例相同； f
flex布局一行显示多个
m0_52518047的博客
10-09 9340
在前端开发的时候，对页面布局的时候，经常遇到固定的一行显示多个，这个经常遇到，所以我想做个记录，等到下次遇到的时候，可以直接拿来使用。本篇博客会持续更新 （1）flex布局之一行显示4个，如果多于4个，自动换行，代码如下 <div style="display: flex; justify-content: space-between; flex-wrap: wrap; "> <div class="item" style="background-color: aliceb
Flex布局的基本用法
weixin_44411575的博客
12-03 643
Flex布局的基本用法
flex布局，一行内显示4个元素，超出4个换行，右间距设置
热门推荐
crazybai0001的博客
07-03 2万+
.search-wrapper { /* flex布局，换行、左对齐 */ display: flex; justify-content: flex-start; flex-wrap: wrap; margin: 0 40rpx; position: absolute; top: 240rpx; left: 0; right: 0;}.city { font-size: 24rpx; background: #fff; border-radius: 20rpx; padding:
flex布局: 一行显示固定个数，换行展示
weixin_52827704的博客
05-11 1万+
以一行显示4个为例
使用flex布局轻松实现页面布局的示例代码
01-18
1、上中下布局： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <title>Document<...
基本布局_flex基本布局模板_flex_
09-30
在前端开发中，Flex布局（Flexible Box）是一种强大的盒模型布局方式，允许开发者轻松地创建响应式和动态的用户界面。这个"基本布局_flex基本布局模板_flex_"项目旨在介绍和提供一个基础的Flex布局模板，帮助开发者...
Flex布局
03-29
例如，要实现一个子元素在父元素中水平垂直居中，传统方法需要通过相对定位和绝对定位配合多行CSS代码，而使用Flex布局，只需要设置`display: flex`，`justify-content: center` 和 `align-items: center`，就能快速...
flex-布局.doc
01-22
Flex 布局提供了简便、完整、响应式的布局方式，能够轻松实现各种页面布局。 一、Flex 布局是什么？ Flex 布局是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定...
flex布局代码及语法讲解
12-20
在Flex布局中，可以轻松实现响应式图片。通过设置图片的`max-width`属性为`100%`，并保持其原始宽高比，图片可以自适应容器大小。配合`object-fit`属性，如`cover`或`contain`，可以进一步控制图片如何适应其容器。 ...
【flex布局】怎么让一行只展示4个元素
Lipn_的博客
03-20 1806
flex布局，让一行只展示4个元素
css 一行显示四个元素
zhangyongxi123的博客
06-13 2092
动态计算每个元素的宽度 (100%-30px)/4。2 . 跟第一种方法同理。设置固定右边距 10px。
css样式 一行四个均分flex排版（终极解法）
weixin_44705979的博客
08-16 1899
【代码】css样式 一行四个均分flex排版（终极解法）
【web前端开发 | CSS】页面布局之盒子模型
小赵不忙的博客
10-23 1220
思维导图 所谓 盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。 CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和 实际内容 1：边框 border：border-width | border-style | border-color； div { /* 实线 虚线 点线 */ border-style: solid;
css3弹性盒子display：flex
zyz00000000的博客
10-02 1万+
css3的flexbox详细介绍：https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 原文链接：https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 浏览器的支持情况： Chrome Safari Firefox Opera IE Edge ...
SQL数据库Excel的导入：出现提示：“……未在…上注册”
菜园的博客
01-16 3502
                                                       （作者：黄启浩   撰写时间：2019年1月16日）   下面我们来解决将Excel导入数据库不成功的部分问题： 问题：SQL数据库Excel的导入：如果操作出现“……未在…上注册” 解决方法： 1、安装如下驱动，完成后再重新导入即可；如图：                ...
如何使用flex进行布局
09-20
Flex布局是一种现代化的网页布局方式，可以轻松实现弹性和自适应的布局效果。下面是使用Flex进行布局的步骤和方法： 1. 创建容器：使用CSS的display属性将容器元素设置为flex，例如将div的class属性设置为flex-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

菜园大萝卜

你的鼓励将是我创作的最大动力！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值