场景：在无数据的子组件中，有图片提示，该页面无数据，想要将这个图片水平垂直居中 父组件 子组件 可以在图片的父元素上同时使用定位方式和flex布局 ...
分类：
移动开发 时间：
2020-02-03 19:05:09
阅读次数：
700
1，弹性盒（flex）布局 中间 .center 区域设置 flex-grow: 1 或者 width: 100% .container { width: 100%; min-height: 200px; background-color: red; display: flex; } .contai ...
分类：
Web程序 时间：
2020-01-30 21:02:49
阅读次数：
103
flex布局原理 常见的父项属性 flex-direction设置主轴方向 justify-content 设置主轴上的子元素排列方式 flex-wrap属性 align-items属性 align-content属性 flex-flow属性 常见的子项属性 align-selt属性 hj ...
分类：
移动开发 时间：
2020-01-26 20:50:51
阅读次数：
107
如图可见flex的属性分为父容器和子容器的属性共12个。关于这些属性具体代表什么意思，网上有很多教程的文章，自觉不能写得比别人更好，所以这里主要写了一些例子关于父容器属性效果的演示，希望可以帮助大家理解。后续还会有关于子容器演示的地址更新。flex布局父容器属性部门效果演示地址 如图可见flex的属 ...
分类：
其他好文 时间：
2020-01-21 19:56:30
阅读次数：
68
html中 <div class="flexLayoutr"> <div class="div_head"></div> <div class="div_content">中间区域</div> <div class="div_foot"></div> </div> css中 *{ margin: 0 ...
分类：
移动开发 时间：
2020-01-21 16:13:07
阅读次数：
185
开始 最近研究一个框架，刚好里面也实现了flex布局的算法，虽然平时也用到flex做一些简单的布局，但是深入到算法实现的时候，发现自己对flex某些概念倒是没那么清晰，立马谷歌把几个flex涉及的属性都好好理清一下，权当一个自我梳理。 main-axis和cross-axis main其实跟flex ...
分类：
其他好文 时间：
2020-01-18 00:46:27
阅读次数：
84
1 弹性布局简介 弹性布局，又称“Flex布局”，是由W3C在2009年推出的一种布局方式。可以简便、完整、响应式地实现各种页面布局。而且已经得到所有主流浏览器的支持，我们可以放心大胆的使用。 >>> 了解两个基本概念，接下来会频繁提到： ① 容器： 需要添加弹性布局的父元素； ② 项目： 弹性布局 ...
分类：
其他好文 时间：
2020-01-16 18:45:37
阅读次数：
160
说明 问题： 一个div宽度不固定，高度固定，采用Flex布局，它里面有两个元素一个img宽度占40%，高度占100%，一个p元素，宽度占60%，高度占100%，调整浏览器窗口大小，要保证，img元素不变形，宽高比不变，怎么办！ 从图中可以看出，随着调整浏览器窗口，图片的宽高比也被破坏了，我们该怎么 ...
分类：
Web程序 时间：
2020-01-15 19:33:18
阅读次数：
76
css: 1 body{ 2 padding: 0 10%; 3 } 4 ul,li{ 5 margin: 0; 6 padding: 0; 7 list-style: none; 8 } 9 .flex-box{ 10 display: flex; 11 border: 1px solid; 12 ...
分类：
Web程序 时间：
2020-01-15 19:11:53
阅读次数：
97
flex 布局父项常见属性: flex-direction: // 设置主轴的方向 row -- 默认值从左到右 row-reverse -- 从右到左 column -- 从上到下 column-reverse -- 从下到上 justify-content: // 设置主轴上的子元素排列方式 f ...
分类：
其他好文 时间：
2020-01-12 19:50:00
阅读次数：
96
