flexbox常用布局左右固定，中间自适应
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<style>
ul{
display:flex;
}
li:first-child,
li:last-child{
width:50px;
background-color: green;
}
li:nth-child(2){
flex:1;
background-color: yellow;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
flexbox常用布局左右固定，中间自适应的更多相关文章
- flexbox常用布局上下固定，中间滚动
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)
经常在工作中或者在面试中会碰到这样的问题,比如我想要个布局 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题. 下面我们分别来学习下,当然我也是总结下而已,有如以下方法: 一: 右 ...
- flex左右布局 左边固定 右侧自适应
flex左右布局 左边固定 右侧自适应 想要保证自适应内容不超出容器怎么办. 通过为自适应的一侧设置width: 0;或者overflow: hidden;解决. 首先实现标题的布局,也很简单: &l ...
- html布局,左侧固定右侧自适应
前几天看到我们的UI稿,要实现左侧固定树结构,右侧自适应.想着自己写过几次但是每次都会忘记,在这里做个笔记. 第一种方法: <!DOCTYPE html> <html lang=&q ...
- css布局两边固定中间自适应的四种方法
第一种:左右侧采用浮动 中间采用margin-left 和 margin-right 方法. 代码如下: <div style="width:100%; margin:0 auto;& ...
- css布局两端固定中间自适应
第一种:采用浮动 1.1首先来看一下网上一个哥们给的代码 <body> <div class="left">左</div> <div cl ...
- 如何用CSS实现左侧宽度固定，右侧自适应（两栏布局）？左右固定中间自适应（三栏布局）呢？
在前端日常布局中,会经常遇到左侧宽度固定,右侧自适应或者左右两边固定,中间部分自适应的实用场景.本文例子中将列举出两种常用的两栏布局,左侧固定右侧自适应的常用方法以及代码和五种左右固定中间自适应的常用 ...
- CSS百分比padding实现比例固定图片自适应布局
一.CSS百分比padding都是相对宽度计算的 在默认的水平文档流方向下,CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的,这个和top, bottom等属性的百分比 ...
- Flutter常用布局组件
Flutter控件本身通常由许多小型.单用途的控件组成,结合起来产生强大的效果,例如,Container是一种常用的控件,由负责布局.绘画.定位和大小调整的几个控件组成,具体来说,Container是 ...
随机推荐
- mysql archive存储引擎导入数据报duplicate key
DROP TABLE IF EXISTS `test`;CREATE TABLE `test` ( `id` int(10) unsigned NOT NULL AUTO_INCREMENT, `ve ...
- jQuery（十一）：jQuery的事件
一.jQuery事件的分类 jQuery事件是对JavaScript事件的封装,常用事件分类如下: 1.基础事件 window事件. 鼠标事件. 键盘事件. 表单事件. 2.复合事件是多个事件的组合 ...
- 虚拟机安装以及PCL的配置（1）
安装虚拟机 (1) 下载VMware安装(自己百度一下,会有很多可供下载的) (2) 安装方式: 双击,一路点击next,不用更改安装路径(当然你也可以更改),选择安装“典型”即可 接着就有安 ...
- LDAP none、simple、strong 笔记
// 该笔记仍在调研中!!不确保中有错误信息!最终目的是想用java实现这三种认证方式. 1.ldaps:// 注意多了个s 参考:https://mail.python.org/pipermail ...
- 彻底去除Win10“快速访问”
windows10的“快速访问”功能对于我个人用处不大,作为一个爱折腾的人决定尝试彻底除去“快速访问”这个侧边栏. 注意:此操作需要确保你已经设置了[让点击Win10任务栏“文件资源管理器”图标打开“ ...
- PHP和MySQL实现消息队列
最近遇到一个批量发送短信的需求,短信接口是第三方提供的.刚开始想到,获取到手机号之后,循环调用接口发送不就可以了吗? 但很快发现问题:当短信数量很大时,不仅耗时,而且成功率很低. 于是想到,用PHP和 ...
- 如何利用jsp实现防盗链功能
index.jsp ----------------------------- Place your content here here is index jsp get header info a. ...
- css小贴士备忘录
前言:在CSS的学习实践过程中,我经常遗忘一些貌似常用的代码,为了能够强化记忆特在此作归纳整理并将陆续增删,以备即时查阅.但愿今后能遇到问题及时解决,牢牢记住这些奇怪的字符们. 一.关于段落文本强制对 ...
- C艹 指针和const的关系和注意事项（非常有意思）
有两种不同的形式将const关键字指向指针. 第一种:让指针指向一个常量对象 const float g_moon = 1.63; float * pm = &g_moon; // 不允许 n ...
- Spring JDBC ResultSetExtractor接口示例
org.springframework.jdbc.core.ResultSetExtractor接口是JdbcTemplate的查询方法使用的回调接口.此接口的实现执行从ResultSet提取结果的实 ...