<!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. 【C】——C模拟atm取款机

    功能描述:1:开户:2:销户:3:存钱:4:取钱:5:查询:6:转账: 主要用的技术: 一:消息队列: 1)key_t key = ftok(".",100); //获取key 2 ...

  2. CSS（三）：引入样式和优先级

    CSS的引入样式总共有三种:行内样式(内联样式表).内部样式表.外部样式表.下面分别来介绍这三种样式. 一.行内样式 行内样式也叫内联样式,使用style属性引入CSS样式.看下面的示例: <! ...

  3. mybatis中的#{}和${}区别

    mybatis中的#{}和${}区别 2017年05月19日 13:59:24 阅读数:16165 1. #将传入的数据都当成一个字符串,会对自动传入的数据加一个双引号.如:order by #use ...

  4. Mybatis if标签判断大小

    1.if标签语法 <select...> SQL语句1 <if test="条件表达式"> SQL语句2 </if> </select&g ...

  5. Oracle IF-ELSE 条件判断结构

    1. IF 语法 IF 表达式 THEN ... END IF; 例如: set serverout on declare v_name varchar2(20):='&name'; begi ...

  6. poj 1723 中位数

    最近在看一些中位数的东西,然后顺便也看了些题目.poj 1723不仅要求到水平位置的最短距离和,还要求水平都相邻的排成一排的最短距离和,即士兵都站成一列. 到y轴的距离好办,按y轴坐标排序,求中位数, ...

  7. css样式冲突问题练习例子

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org ...

  8. Sublime for mac 开发Golang ： 一步步环境配置

    安装Golang 在官网上直接下载安装包就可以了.下载pkg格式的最新安装包 ,直接双击运行,一路按照提示操作就可以完成安装. 或者使用brew进行安装 brew install go 完成安装之后, ...

  9. Netty 介绍

    本指南对Netty 进行了介绍并指出其意义所在. 1. 问题 现在,我们使用适合一般用途的应用或组件来和彼此通信.例如,我们常常使用一个HTTP客户端从远程服务器获取信息或者通过web service ...

  10. Ubuntu下Ruby的下载和编译源码安装

    1.Ruby的下载 Ruby可以在Ruby 官网上下载,如果想获取更多的Ruby版本,可以到淘宝镜像网站下载. 2.Ruby的编译源码安装 解压 首先把下载下来的源码压缩包解压到自己指定的目录 编译安 ...