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. Android 真机投影到PC端,真机投影工具;Vysor

    Vysor可以把Android真机投影到PC端,也就是电脑上:手机端和PC端课同步操作: Vysor是Chrome浏览器的插件,我们想要添加这个插件需要FQ: 从这里可以直接下载:Vysor

  2. 零基础学习python_字典(25-26课)

    今天学到后面的知识,突然发现之前学习到的字典列表啥的都有点忘了,打算补一下之前学到的字典,到时候你看的时候,字符串.列表.字典.元祖这几个没啥顺序,刚开始学的时候了解下方法,当然你可以死记硬背下,后面 ...

  3. 转:Java对象序列化

    Java对象序列化 当两个进程在进行远程通信时,彼此可以发送各种类型的数据.无论是何种类型的数据,都会以二进制序列的形式在网络上传送.发送方需要把这个Java对象转换为字节序列,才能在网络上传送:接收 ...

  4. 学生管理系统.c

    直接贴代码了 另有:python调用c程序的实现 #define _CRT_SECURE_NO_WARNINGS #include<iostream> using namespace st ...

  5. 27.纯 CSS 创作一个精彩的彩虹 loading 特效

    原文地址:https://segmentfault.com/a/1190000014939781 感想:正方形->圆->旋转一定角度->动画->隐藏下一半 HTML代码: &l ...

  6. python中的remove

    remove()从左到右寻找,移除找到的第一个指定元素,举个例子: 1 a = ["hello", "world", "world", &q ...

  7. 2018年1月21日--2月4日 NAS

    二十号去比赛时,与同事闲聊时说起家庭服务器,后来搜到nas(网络附着存储器),找到freenas,突然觉得很有用,手机拍了大量的照片视频,存储在电脑,已经换过几次硬盘了,对于这些珍贵的资料,万一硬盘坏 ...

  8. leetcode991

    class Solution: def brokenCalc(self, X: 'int', Y: 'int') -> 'int': if X>=Y : return Y-X else: ...

  9. Spring Cloud (3)B Ribbon 负载均衡 IRule

    package com.service.config; import com.netflix.loadbalancer.IRule;import com.netflix.loadbalancer.Ra ...

  10. 阅读程序 回答问题——FindTheNumber

    阅读程序 回答问题——FindTheNumber 阅读下面程序,请回答如下问题:问题1:这个程序要找的是符合什么条件的数?问题2:这样的数存在么?符合这一条件的最小的数是什么?问题3:在电脑上运行这一 ...