<!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常用布局左右固定，中间自适应的更多相关文章

  1. flexbox常用布局上下固定，中间滚动

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  2. CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)

    经常在工作中或者在面试中会碰到这样的问题,比如我想要个布局 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题. 下面我们分别来学习下,当然我也是总结下而已,有如以下方法: 一: 右 ...

  3. flex左右布局 左边固定 右侧自适应

    flex左右布局 左边固定 右侧自适应 想要保证自适应内容不超出容器怎么办. 通过为自适应的一侧设置width: 0;或者overflow: hidden;解决. 首先实现标题的布局,也很简单: &l ...

  4. html布局,左侧固定右侧自适应

    前几天看到我们的UI稿,要实现左侧固定树结构,右侧自适应.想着自己写过几次但是每次都会忘记,在这里做个笔记. 第一种方法: <!DOCTYPE html> <html lang=&q ...

  5. css布局两边固定中间自适应的四种方法

    第一种:左右侧采用浮动 中间采用margin-left 和 margin-right 方法. 代码如下: <div style="width:100%; margin:0 auto;& ...

  6. css布局两端固定中间自适应

    第一种:采用浮动 1.1首先来看一下网上一个哥们给的代码 <body> <div class="left">左</div> <div cl ...

  7. 如何用CSS实现左侧宽度固定，右侧自适应（两栏布局）？左右固定中间自适应（三栏布局）呢？

    在前端日常布局中,会经常遇到左侧宽度固定,右侧自适应或者左右两边固定,中间部分自适应的实用场景.本文例子中将列举出两种常用的两栏布局,左侧固定右侧自适应的常用方法以及代码和五种左右固定中间自适应的常用 ...

  8. CSS百分比padding实现比例固定图片自适应布局

    一.CSS百分比padding都是相对宽度计算的 在默认的水平文档流方向下,CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的,这个和top, bottom等属性的百分比 ...

  9. Flutter常用布局组件

    Flutter控件本身通常由许多小型.单用途的控件组成,结合起来产生强大的效果,例如,Container是一种常用的控件,由负责布局.绘画.定位和大小调整的几个控件组成,具体来说,Container是 ...

随机推荐

  1. Publishing to IIS 发布到IIS

    原文:https://docs.asp.net/en/latest/publishing/iis.html 发布到IIS Publishing to IIS By Rick Anderson and  ...

  2. Navi.Soft31.WinForm框架(含下载地址)

    1概述 1.1应用场景 尽管互联网高速发展,互联网软件也随之越来越多,但桌面应用程序在某些领域中还是不可替代,如MIS,ERP,CRM等软件产品,同时,这类软件均包括一些通用的功能,如:与数据库操作, ...

  3. [hadoop读书笔记] Hadoop下各技术应用场景

    1.数据采集 对于数据采集主要分为三类,即结构化数据库采集,日志和文件采集,网页采集. 对于结构化数据库,采用Sqoop是合适的,可以实现结构化数据库中数据并行批量入库到hdfs存储.对于网页采集,前 ...

  4. hashMap put方法 第三行代码

    inflateTable(threshold) 分析: Hi.java public class Hi { //临界值(一个值最接近2的n次幂的数,比如7的临界值为8) int threshold; ...

  5. Java如何使用finally块来捕捉异常？

    在Java编程中,如何使用finally块来捕捉异常? 此示例显示如何使用finally块来通过使用e.getMessage()捕获运行时异常(Illegalargumentexception). p ...

  6. winform程序开机自动启动

    app.manifest <requestedExecutionLevel level="requireAdministrator" uiAccess="false ...

  7. 转载：AOP那点事

    原作者:黄勇 博客地址:https://my.oschina.net/huangyong/blog/161338 又是一个周末,刚给宝宝喂完牛奶,终于让她睡着了.所以现在我才能腾出手来,坐在电脑面前给 ...

  8. iOS : 判断运行设备类型是否是iPad

    以下代码由 CocoaChina 版主 “cclv” 分享,可用于判断应用运行的设备是否是 iPad #define isPad (UI_USER_INTERFACE_IDIOM() == UIUse ...

  9. eclipse 访问 hive1.2.1

    参考链接1.http://www.iteblog.com/archives/846 操作实际参考代码:http://sunhs.sinaapp.com/?p=343 配置eclipse 搞1天, 不管 ...

  10. 【Ubuntu】boot空间不足

    http://www.linuxidc.com/Linux/2015-05/117401.htm http://www.xitongzhijia.net/xtjc/20150327/43160.htm ...