html左右超出,css 横向超出滚动使用flex布局

描述

横向超出滚动一般使用display:inline-block布局,元素里面东西比较多,想使用flex布局怎么办?可以使用下面的方法

使用

Document

.box {

width: 700px;

height: 80px;

display: flex;

background-color: #f00;

overflow-x: auto;

}

.sub-box {

/* 如果最后一个元素还没有margin-right,就打开flex-shrink: 0;这个注释 */

/* flex-shrink: 0; */

}

.item {

flex-shrink: 0;

background-color: #ff0;

width: 300px;

height: 100%;

margin-right: 20px;

}

111

222

333

在item元素上包上一层空的sub-box是为了解决最后一个元素没有margin-right

如果包上一层空的div,最后一个元素还没有margin-right,就给类名.sub-box加上

flex-shrink: 0;

效果如图

横向超出滚动使用flex布局.jpg

动动手指点赞

如果这篇文章对你有用,请给我点个赞,让我更加有动力写下去,谢谢

html左右超出,css 横向超出滚动使用flex布局相关推荐

css日积月累系列---简易的flex布局使用sass和less 封装版
本文只是作日积月累的css 样式使用随着实际应用的开发,会越来越大 ,本css只是针对日常用到的.less 语法封装,适用antdesign- UI 后台管理系统开发 .font(@i) when(@ ...
datagrid底部显示水平滚动_CSS flex 布局，头部和底部固定，中间出现滚动条
文章目录原理说明案例(原理说明) 案例二(回字形布局) 案例 (计算出中间组件的高度,剩下的百分百) 原理说明利用flex布局,很容易实现"左右两边固定,剩余100%"的布局 ...
css专业名词,CSS进阶系列一（flex布局基础知识——介绍、规范、主要思想、专业术语）...
一.介绍 flex是flexible box的缩写,意为弹性布局.flexible box是CSS3新增加的,用来为盒模型提供最大的灵活性.flex旨在提供一个更加有效的方式来布置,对齐和分布在容器之 ...
Bootstrap4+MySQL前后端综合实训-Day01-AM【实训安排、HBuilder下载及使用、双飞翼布局（圣杯布局）案例、CSS在线手册、flex布局中的对齐方式】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记] 目录实训安排日常要求.项目要求项目开发流程 HTML+CSS+JavaScript 基 ...
好用的前端flex布局，通用的flex布局CSS代码
我的社交恐惧症,主要来自于,收入低??? 今天看到一个图,真是人间真实: 不知道大家上班之后有没有经常写前端,反正身为后端的我是经常写前端的,尤其是调样式调的人痛不欲生,最烦人的是,还要一个像 ...
2022-11 CSS：flex布局父子宽度问题-小程序scrollView-div横向滚动字体超出隐藏-居中
1.父盒子不限制宽度,子盒子跟随子盒子最长长度如上图第二行子元素宽度会跟随第一行宽度解决方案: 对第二行设置:width: max-content; 使其宽度跟随自身内容 2.flex布局时,挤压 ...
CSS内容超出元素高度滚动，并且滚动条隐藏
CSS内容超出元素高度滚动,并且滚动条隐藏给父元素设置宽度,溢出隐藏,子元素设置 // html <div class="box"><div class=&qu ...
Vue中使用纯CSS样式设计Table横向竖向滚动自定义个别列固定
在Vue中CSS样式来设计Table横向竖向滚动自定义个别列表头固定前言一.表格数据二.样式设计 1.表格与外层DIV样式 2.固定表头的样式(重要) 总结前言大家一定使用过很多UI,UI都 ...
div横向超出可滚动，自动添加滚动条，自定义滚动条样式，
先看一下最终的效果图吧: 第一种文字内容超出显示滚动条: 父盒子:横向超出滚动:overflow-x: scroll; .box {width: 100%;box-sizing: border-box ...

html左右超出,css 横向超出滚动使用flex布局

html左右超出,css 横向超出滚动使用flex布局相关推荐

最新文章

热门文章

html左右超出,css 横向超出滚动 使用flex布局

html左右超出,css 横向超出滚动 使用flex布局相关推荐

最新文章

热门文章

html左右超出,css 横向超出滚动使用flex布局

html左右超出,css 横向超出滚动使用flex布局相关推荐