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是 ...
随机推荐
- C++ operator关键字详解
C++中的operator主要有两个作用,一是操作符的重载,一是自定义对象类型的隐式转换. 类型转换操作符(type conversion operator)是一种特殊的类成员函数,它定义将类类型值转 ...
- 记 Install VNC On RaspberryOS During 创新实训 自然语言交流系统
树莓派初始化设置并安装VNC SSH上去之后第一件事就是更新debian: sudo apt-get update, 升级完成后重启一下; 在SSH终端输入sudo raspi-config, 这里需 ...
- QMDP-Net: Deep Learning for Planning under Partial Observability
一篇用deep neural network做POMDP的论文
- soapui-使用groovy脚本执行用例请求
import com.eviware.soapui.impl.wsdl.testcase.WsdlTestRunContext CURRENT_TESTCASE = testRunner.testCa ...
- Cisco无线控制器配置Radius
使用Cisco无线控制器管理AP,配置Radius服务器,用于企业加密wifi的认证. 结合上一篇文档进行操作: http://www.cnblogs.com/helloworldtoyou/p/80 ...
- 第三百三十五节，web爬虫讲解2—Scrapy框架爬虫—豆瓣登录与利用打码接口实现自动识别验证码
第三百三十五节,web爬虫讲解2—Scrapy框架爬虫—豆瓣登录与利用打码接口实现自动识别验证码 打码接口文件 # -*- coding: cp936 -*- import sys import os ...
- 本机IP、127.0.0.1和0.0.0.0的区别
本机ip.127.0.0.1和0.0.0.0区别 网络java IP地址的记法: IP地址由四个字节构成,为了方便阅读和书写,每个字节用0-255的数字表示,字节之间用’.'分割,如: 10.10 ...
- 联想服务器X3650 M2 配置 RAID5 + 热备盘
实验环境: 1. 服务器型号联想 System X3650 M2 2. 六块300G SAS硬盘 实验目的: 配置RAID 5 ,搭建重要文件备份服务器. 标注:本教程六块硬盘,其中五块硬盘做R ...
- HTML5重力感应小球冲撞动画实现教程
今天我们来分享一款很酷的HTML5重力感应动画教程,这款动画可以让你甩动页面中的小球,小球的大小都不同,并且鼠标点击空白区域时又可以生成一定数量的小球.当我们甩动小球时,各个小球之间就会发生互相碰撞的 ...
- 8.4 Java 命名规范
Class: 所有单词的首字母大写, TestJava Method: 第一个单词的首字母小写,之后每个单词的首字母大写, getAddressForMe() Property: 第一个单词的首字母小 ...