<!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. .net修炼笔记

    1. 底层基础概念 CIL(Common Intermediate Language) 中间语言(C# VB 最终编译成CIL语言) BCL(Base Class Library) 基础类库 (Sys ...

  2. 多线程二：线程池(ThreadPool)

    在上一篇中我们讲解了多线程的一些基本概念,并举了一些例子,在本章中我们将会讲解线程池:ThreadPool. 在开始讲解ThreadPool之前,我们先用下面的例子来回顾一下以前讲过的Thread. ...

  3. 使用postman测试文件上传

    调试API神奇----postman 请求方法:POST Body-->form-data-->key(选择file) QQ技术交流群:282575808 ---------------- ...

  4. easyui使用介绍

    http://www.jeasyui.com/index.php based on jQuery, Angular and Vue. don't need to write many javascri ...

  5. MATLAB — axis

    转至:http://blog.csdn.net/cs_zlg/article/details/8516463 axis中文为“轴”之意,在matlab中用于控制坐标轴的范围和样式(颜色等). axis ...

  6. 自定义shareSDK的验证码短信内容

    应用中使用了shareSDK来做第三方登录和短信验证码的接收,但是想将短信内容修改为自己想要的内容 官方文档中并未详细提及:无GUI接口调用 默认的短信内容为: 如果只是要修改括号中的抬头,只需按照此 ...

  7. 自然语言交流系统 phxnet团队 创新实训 项目博客 （九）

    项目技术总结: VoiceToText的具体使用方法: 语音转文本部分是调用的科大讯飞的在线语音,它的激发方式是按键,通过按钮触发开启安卓设备的录音,此部分需要在源码中写入关于安卓权限的要求,来调用安 ...

  8. java SoftReference WeakReference

    Java 2 平台引入了 java.lang.ref 包,其中包括的类可以让您引用对象,而不将它们留在内存中.这些类还提供了与垃圾收集器(garbage collector)之间有限的交互. 1.先“ ...

  9. python 百度图片爬虫

    # -*- coding:utf-8 -*- #https://blog.csdn.net/qq_32166627/article/details/60882964 import requests i ...

  10. 【5】JVM-垃圾收集器

    通过学习了解到现在商用的JVM中的垃圾收集采用的是分代收集算法,即针对不同年代采用不同的收集算法.在JVM中,GC主要作用于堆内存中,堆内存又被划分为新生代和老年代,由于新生代对象绝大多数是朝生夕死, ...