前端 flex弹性布局之弹性布局中文换行

news/2024/5/19 18:18:48 标签: flex, 布局, 前端, html5, flex布局

阮一峰布局语法: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
Flex 布局实例篇:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

<div style="background: green; display: flex;">
        <div style="flex-basis: auto; white-space: nowrap; background: red; ">我是第一</div>
        <div style="width: 100%; background: #0f0;">66666</div>
</div>

这里写图片描述

在此不讲flex布局语法跟实例,请参考以上 阮一峰 老师的教程。
主要提醒大家注意:在使用弹性布局的时候,如果div内部写的是 中文 ,会导致内部换行,请给换行的div加一个 white-space: nowrap; 属性。


http://www.niftyadmin.cn/n/1770363.html

相关文章

js 函数调用各种模式详解

在js 里函数调用有四种方法&#xff1a; 方法调用正常函数调用构造器函数调用apply/call 调用 无论哪种函数调用 除了 声明时定义的形参外&#xff0c;还会自动添加 两 个形参&#xff0c;分别是 this 和 arguments。 this: 方法调用&#xff1a; 这个很好理解&#xff0c…

js 按钮 加载中

<button type"button" class"changebrief btn btn-primary btn-sm" data-loading-text"提交中...">保存</button>$(function() {$(".changebrief").click(function(){$(this).button(loading).delay(1000).queue(function…

js 判断滚动条是否停止滚动

// 滚动的值 var start 0; // 对比时间的值 var end 0; var timer null; document.onscroll function(){clearTimeout(timer) // 每次滚动前 清除一次timer setTimeout(Data, 2000);start document.documentElement.scrollTop || document.body.scrollTop; } f…

js textarea 或 可编辑div 上,键盘停止操作n秒后执行事件

<textarea></textarea> or <div contenteditable"true"></div> // 输入的值 var editor_start 0; // 对比时间的值 var editor_end 0; var timer null;// a 为 textarea 或 可编辑div 对象 // 停止操作键盘时 n秒后&#xff0…

JS 暴力禁止alert弹窗

// 禁止alert弹窗。 防止错误提醒 window.alert function() {return false; }

微信小程序中使用阿里矢量字体图标

阿里矢量图库<----地址 第一步&#xff1a; 第二步&#xff1a; 第三步&#xff1a; 第四步&#xff1a; 第五步&#xff1a;

mac系统 启动/停止/重启mysql服务

在命令窗口找到mysql服务的目录文件 默认路径是 个人\磁盘\usr\local\mysql\support-files 目录下执行命令1启动MySQL服务 命令1 sudo /usr/local/MySQL/support-files/mysql.server start 停止MySQL服务 sudo /usr/local/mysql/support-files/mysql.server stop 重启MySQL服…

es6开发环境搭建

一&#xff0c;先创建一个项目&#xff0c;项目中有两个文件夹&#xff0c;src和dist&#xff0c;一个html文件 src&#xff1a;将编写的ES6的js文件放到此文件夹中&#xff08;这里是index.js文件&#xff09; dist&#xff1a;将通过Babel编译成的ES5的js文件放到此文件中&am…