tnblog
首页
视频
资源
登录
愿你出走半生，归来仍是少年
博主信息
排名
3
文章
317
粉丝
22
评论
14
文章类别
最新文章
最新评价
bootstrap 栅格布局一小例子
剑轩 : 后端写样式有点痛苦哇
一点flex布局的运用
剑轩 : 后端写样式有点痛苦哇
vue.js常用指令
剑轩 : 可以可以，多总结一点
关于我们
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：50010702506256
欢迎加群
欢迎加群交流技术
转

flex平分宽度。flex宽度自适应，均分宽度

5067人阅读 2023/2/7 23:24 总访问：2060215 评论：0 收藏：0 手机
分类: 前端

html:

  1. <div class="parent"> 
  2.     <div class="item">
  3.         测试1
  4.     </div>
  5.     <div class="item">
  6.         测试1
  7.     </div>
  8.     <div class="item">
  9.         测试1
  10.     </div>
  11.     <div class="item">
  12.         测试1
  13.     </div>
  14. </div>

样式：

  1. .parent{
  2.     display: flex;
  3.     flex-direction: row;
  4.     width: 100%;
  5.     height: 100px;
  6.     align-items: center;
  7. }
  8. .item{
  9.     flex: 1;
  10.     height: 20px;
  11. }

原文地址：https://blog.csdn.net/u014753756/article/details/108710338


欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739。有需要软件开发，或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

css弹性盒子，flex布局
css弹性盒子由于版本不同浏览器问题造成了一些不同的写法display:flexbox;在google浏览器中如果使用下面的写法就不行displa...

flex布局常见问题
flex布局中内容div自适应高度&lt;divclass=&quot;content&quot;&gt; &lt;divclass=&quot;text-center&quot;style=&quot;...

flex好看的相册
先让大家看看效果图吧：需要引入外来插件：https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magni...

一点flex布局的运用
水平分割：html:&lt;divclass=&quot;flex-container&quot;&gt; &lt;divclass=&quot;flex-item&quot;&gt;flexitem1&lt;/div...

css div水平居 。文字垂直居中 。flex的方式实现div的垂直与水平居中。布局模板
DIV等元素水平居中定宽度+margin:top auto可以让一个块级别元素在外层居中例如这样：效果：可以看到这个div已经居中了但是...

uni-app 基础view，flex布局使用
代码如下： &lt;template&gt; &lt;view &gt; &lt;view style=&quot;display: flex;flex-direction:row-reve...

flex布局多行自适应间隔
//父盒子，设置为： .templateItem { width: 100%; text-align: center; display: flex; align-content: fl...

css实现左边div固定宽度，右边div自适应撑满剩下的宽度。左边定宽，左边固定，右边自适应。flex 占剩下的宽度
这是一道面试题，你有多少种办法呢？这里我们假设左边名为 left，宽度为 200 px，右边名为 right。即默认 .left { widt...

flex 每行3个。flex一行显示3个。flex 每行显示4个自适应排列。flex每行固定几个布局。css 格子栏效果，css实现框框效果。模板。小屏下一行显示4个，大屏下一行显示5个
[TOC]效果如下，每行显示3个自适应排列 其实也很简单，只需要设置父元素flex布局，然后设置一下换行排列，flex-wrap: wrap...

flex子元素靠右。flex让某个子元素靠右或靠左显示
以下以块元素的Flex布局为示例：只需要两句代码，轻松搞定！ 代码1：在父元素里面加入以下代码：（父盒子加了display: fle...

vue布局模板，前端布局模板，flex布局应用
设计图效果： 代码： &lt;!-- 学习活跃度 --&gt; &lt;template&gt; &lt;div class=&quot;learnActivityContainer&q...

flex布局一行显示多个。flex布局固定显示n个，自适应布局
在前端开发的时候，对页面布局的时候，经常遇到固定的一行显示多个，这个经常遇到，所以我想做个记录，等到下次遇到的时候...

flex flex-gorw不等分的问题
flex flex-gorw不等分的问题今天在练习flex 栅格布局的时候， 明明设置了项目元素都是flex-gorw:1;但是发现有个地方 ，因为...

flex实现一行显示n个数量的布局，不同屏幕宽度下显示不同的数量，自适应一行显示的个数
[TOC]要实现的效果如下: 其实原理也非常简单，父元素主要是主要就是设置一个flex布局，然后flex-wrap设置为需要换行 .app...