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. python学习过程中的踩坑记录<若干,随时更新>

    问题1:python中print的连串输出与java不一样? 输入print(code +"+++"); --在代码中写入,界面未报错,但是告诉你不行 会报错,如图: 解决办法: ...

  2. thinkphp 验证的使用

    TP5验证可分为独立验证和验证器: 独立验证是可直接写在控制器里直接验证如下: //独立验证 $data = [ 'name'=>'vendor33333', 'email'=>'vaen ...

  3. [转]IISExpress配置使其能通过IP访问方法

    转自http://www.cnblogs.com/liujh/p/4315927.html 环境说明: 本机IP:192.168.2.100:Web端口:11843 步骤一 打开[我的文档]\IISE ...

  4. JAVA给图片添加水印

    package com.test; import org.junit.Test; import javax.imageio.ImageIO; import java.awt.*; import jav ...

  5. 《汇编语言 基于x86处理器》第八章高级过程部分的代码 - 两种规范计算数组元素的和

    ▶ 输入 Count 个 32 位有符号整数,计算他们的和 ● 代码,使用堆栈传参 ;// Sum_main.asm,主过程 INCLUDE Irvine32.inc EXTERN PromptFor ...

  6. Mysql中select的正确姿势

    引言 大家在开发中,还有很多童鞋在写查询语句的时候,习惯写下面这种不规范sql select * from table 而不写成下面的这种规范方式 select col1,col2,...,coln ...

  7. JavaScript:今天是今年第几周?

    用js实现,今天是今年第几周? 基本思路: 1.当前时间 - 今年1月1日0时,拿到时间差(毫秒数) 2.时间差/7天毫秒数,向上取整 var d = new Date('2018-01-01 00: ...

  8. mybatis 异常和注意

    1.  Could not set parameters for mapping like语句出错,因将%%写入到mapper.xml中导致,将%%随同参数一并传入. 例:String userNam ...

  9. MFC+OpenGL基础绘制<转>

    转载地址:https://blog.csdn.net/u013232740/article/details/47904115 ------------------------------------- ...

  10. postman 请求种添加用户权限

    1. 打开postman, 在Tests输入以下内容: var jsonData =JSON.parse(responseBody);//获取body中返回的所有参数 postman.setGloba ...