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是 ...
随机推荐
- QTcpSocket的连续发送数据和连续接收数据
关于这个问题折腾了我好久,以前做些小练习的时候,用QTcpSocket的write()一数据,然后接收方只要emit一个readyread()信号然后就用QTcpSocket的read()去读.本以为 ...
- chrome误删了bookmarks且已经同步清空了google云端的挽救方式
收藏夹里被误删文件恢复步骤:1.快捷键 Win+R 输入 Chrome 的用户数据路径:Windows XP:%USERPROFILE%\Local Settings\Application Data ...
- ubuntu安装mxnet GPU版本
安装mxnet GPUsudo pip install mxnet-cu80==1.1.0 推荐pip安装mxnet,土豪gpu版本: pip install mxnet-cu90==1.0.0 豪华 ...
- 实践:C++平台迁移以及如何用C#做C++包装层
在前面,我们看过OpenTK与MOgre,这二个项目都是C#项目,但是他的实现都是C++.他们简单来说就是一个包装层.常见的包装方式有二种,一种就是我们熟知的显式P/Invoke(DllImport) ...
- python 进行后端分页详细代码
后端分页 两个接口 思路: 1. 先得到最大页和最小页数(1, 20) --> 传递给前端, 这样前端就可以知道有多少个页数 2. 通过传递页数得到当前页对应数据库的最大值和最小值 3. 通过s ...
- hostapd作为radius服务器
使用hostapd作为radius服务器,用于企业wifi加密认证. 参考链接: http://www.cnblogs.com/claruarius/p/5902141.html 去网上下载hosta ...
- Apache Flume 学习
Apache Flume,又称Flume NG (next generation),前身是Cloudera公司的Flume项目 -- 又称Flume OG. 这货的功能就是从源中将数据收集到指定的目的 ...
- VIM下的插入模式的相关知识：
1. 建议:当打错一个单词时,删除掉重新打一遍, 避免在错誤的基础上进行修改: 2. 在插入模式下,可以用一些组合键,它也可以用于VIM 命令模式下,也可以用于 base shell 下: ctrl- ...
- 用OpenGL进行曲线、曲面的绘制
实验目的 理解Bezier曲线.曲面绘制的基本原理:理解OpenGL中一维.二维插值求值器的用法. 掌握OpenGL中曲线.曲面绘图的方法,对比不同参数下的绘图效果差异: 代码1:用四个控制点绘制一条 ...
- oracle for update和for update nowait的区别 - 转
1.for update 和 for update nowait 的区别: 首先一点,如果只是select 的话,Oracle是不会加任何锁的,也就是Oracle对 select 读到的数据不会有任何 ...