<!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. Jvm中时区设置方式

    Jvm中时区设置方式2018年08月08日 08:19:31 liumiaocn 阅读数:156更多个人分类: 编程语言版权声明:本文为博主原创文章,未经博主允许欢迎转载,但请注明出处. https: ...

  2. spring boot 使用拦截器 无法注入 配置值 、bean问题

    参考:https://www.cnblogs.com/SimonHu1993/p/8360701.html 一定要将 拦截器组件 交给spring容器进行管理,这样才能注入配置值,或者注入bean: ...

  3. (笔记)Mysql命令drop database：删除数据库

    drop命令用于删除数据库. drop命令格式:drop database <数据库名>; 例如,删除名为 xhkdb的数据库:mysql> drop database xhkdb; ...

  4. Tomcat 的 DefaultServlet

    问题描述: 群里有人测试 Spring MVC,没有配置任何Controller,只配置了一个view resolver,指定了前缀后缀. 然后,他问的是 当访问 localhost:8080/tes ...

  5. vscode 自定义快捷键

    vscode 自定义快捷键 这两天用vscode写了下Python,感觉很舒服,只是快捷键不如人意,略作修改,放上来作为备份.smile~ 主要更改: 代码格式化 ctrl+alt+l 执行代码 ct ...

  6. e814. 创建一个可监听选择状态的菜单项

    A menu item can receive notification of selection changes by overriding its menuSelectionChanged() m ...

  7. 利用smba实现windows上写程序，linux上运行

    1.在linux下载程序代码(确保获取正确的文件属性) 2.在windows编写代码,对于已有代码,不改变文件权限,如原先为755的,更改文件内容后依然是755的文件,如果要新建文件,默认为644,其 ...

  8. Sql Server查询视图和表

    SELECT obj.name tablename, CAST ( CASE WHEN (SELECT COUNT() FROM sys.indexes WHERE object_id= obj.OB ...

  9. Spring简单集成Redis

  10. middle

    /** * Created by lkl on 2017/7/31. *//** * Created by lkl on 2017/6/26. *///spark-shell --driver-cla ...