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是 ...
随机推荐
- svn cleanup失败
今天用SVN的时候出现被锁定的情况,既不能更新代码也不能提交. 解决方法如下: 1. 在被锁定的文件夹上点右键,找到并点击Clean up菜单项 2. 在Cleanup对话框中勾选“Break loc ...
- “ sgen.exe ”已退出，代码为 1
解决方案:visual studio 2010 选定web项目,右键选择“属性”—“生成”,将“生成序列化程序集”设成“关闭”. 若你使用的是Visual Studio 2012,还需要在“标准”工具 ...
- PCL的PNG文件和计算点云重心
PCL提供节约一点云的值为一个PNG图像文件的可能方案.显然,这只能用有序的点云来完成,因为生成的图像的行和列将与点云的对应完全一致.例如,如果你从一个传感器Kinect或Xtion的点云,你可以用这 ...
- js之队列01
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- XmlnsDefinition for a Cool Namespace Mapping
In XAML, when you want to reference a CLR type, you have to add a namespace mapping that maps the XM ...
- 【转】Windows 7 API Internet Connection Sharing(ICS) 与 Wireless Hosted Network构建本地AP
原文:http://hi.baidu.com/ritrachiao/item/bf7715e6bb8cb3a0c10d75be [此刻我要大大地记录一下!] 这个折腾了我好几天的Windows 7 A ...
- MySql避免重复插入记录的几种方法
本文章来给大家提供三种在mysql中避免重复插入记录方法,主要是讲到了ignore,Replace,ON DUPLICATE KEY UPDATE三种方法,有需要的朋友可以参考一下 方案一:使用ign ...
- Python判断操作系统类型
代码: import platform def TestPlatform(): print ("----------Operation System--------------------- ...
- python-切片实例
针对list或tuple取指定范围的操作.可以使用切片(slice),非常有用 1.list:可变数组 L=['a','b','c','d','e'] >>> L[0:3] #从第0 ...
- ELK filter过滤器来收集Nginx日志
前面已经有ELK-Redis的安装,此处只讲在不改变日志格式的情况下收集Nginx日志. 1.Nginx端的日志格式设置如下: log_format access '$remote_addr - $r ...