https://www.zhangxinxu.com/wordpress/2018/10/display-flex-css3-css/#align-self

display: flex;
flex-wrap: wrap;
justify-content: space-between;
 
一行两条 换行 左右对其

样式

ul.goods{
width: auto;
height: auto;
margin: 0px;
padding: 10px 30px;
background: url('../../../static/images/beshopkepper/line.png') center repeat-y;
background-size: 100%;
min-height: 230px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
ul.goods li{
width: 48%;
height: 200px;
border-radius: 10px;
margin-bottom: 20px;
}

css flex 属性教程的更多相关文章

  1. 【转载】CSS flex属性深入理解

    文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/ 原文链接:https://www.zhangxinxu.com/wordpress/2019/12/css-f ...

  2. css总结2:Flex 布局教程:Flex 语法(转)

    Flex 布局教程:语法篇 网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些 ...

  3. 87.CSS Flex 弹性盒模型布局教程(共用的css在48篇文章gird)

    CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...

  4. css 13-CSS3属性:Flex布局图文详解

    13-CSS3属性:Flex布局图文详解 #前言 CSS3中的 flex 属性,在布局方面做了非常大的改进,使得我们对多个元素之间的布局排列变得十分灵活,适应性非常强.其强大的伸缩性和自适应性,在网页 ...

  5. CSS布局学习(二) - flex属性

    flex属性 定义 flex布局包括最外层的容器和内部的元素,flex属性是内部元素属性.flex属性是flex-grow, flex-shrink, flex-basis三个属性的简写 flex-g ...

  6. CSS学习笔记(12)--Flex 布局教程:实例篇

    原文--阮一峰博客 作者: 阮一峰 日期: 2015年7月14日 上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只 ...

  7. CSS学习笔记(11)--Flex 布局教程:语法篇

    原文--阮一峰博客 作者: 阮一峰 日期: 2015年7月10日 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 ...

  8. css总结3:Flex 布局教程:Flex-demos(转)

    上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇&g ...

  9. HTML/CSS:display:flex 布局教程

    网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂 ...

随机推荐

  1. 避免crontab输出日志

    在cron的自动执行语句后加上> /dev/null 2>&1 例:4 3 * * * /usr/bin/a.sh > /dev/null 2>&1这样就OK拉 ...

  2. CheckedListBox  数据绑定

    CheckedListBox  数据绑定方式有多总,常用的绑定方式总结如下: 1.  Items.Add 通过 Itemes.Add 方法来向 CheckedListBox  中添加项 2. Data ...

  3. SpringBoot入门 (十) 发送邮件

    本文记录学习在SpringBoot中发送邮件. 一 邮件发送过程 发送邮件是一个我们在项目中经常会用到的功能,如在用户注册时发送验证码,账户激活等都会用到.完整的一个邮件发送过程主要包含以下几个步骤: ...

  4. Fiddler设置抓取https请求

    环境准备 1.安装最新版本的Fiddler程序 官网地址:https://www.telerik.com/fiddler 本文写的时候,fiddler最新的版本为5.0 2.安装fiddler证书生成 ...

  5. IDEA搭建Spring框架环境

      一.spring 框架概念 spring 是众多开源 java 项目中的一员,基于分层的 javaEE 应用一站式轻量 级开源框架,主要核心是 Ioc(控制反转/依赖注入) 与 Aop(面向切面) ...

  6. fabric-ca1.03安装

    前面的文档已经成功的安装了fabric1.0.1的e2e例子.之后代码换成1.0.3版本按步骤重新安装一下,就可以切换到1.0.3了.1.0.3的脚本和启动命令没有变化,还是用的1.0.1的. 1.准 ...

  7. springboot工程的添加方式

    1.将spring boot做为父工程 <parent> <groupId>org.springframework.boot</groupId> <artif ...

  8. 【Servlet】监听器入门

  9. openx

    1openx 插件开发——终端用 2openx _金额 3openx ————带整理 4openx url 5Openx 2.8.x 在php5.4.x下数据统计不能正常显示解决方案 6openx改造 ...

  10. Android Netty Server

    项目源码在github上,请看这里-->Android Netty Server Android netty server Start a netty server on android Dow ...