flex布局 | 易学教程

【原】移动web页面支持弹性滚动的3个方案

阅读更多关于【原】移动web页面支持弹性滚动的3个方案

传统 pc 端中，子容器高度超出父容器高度，通常使用 overflow:auto 可出现滚动条拖动显示溢出的内容，而移动web开发中，由于浏览器厂商的系统不同、版本不同，导致有部分机型不支持对弹性滚动，从而在开发中制造了所谓的 BUG。上图如果在PC端中，我们可以利用 position:fixed 和 overflow:auto 进行简单的布局实现我们需要的效果，而在手机端遇到的问题如下： ios4 和 android2.2 以下不支持 position:fixed ios 和 android2.3 以下不支持 overflow:auto ios4 和 android 不支持 overflow-scrolling 最严重的结果是：滚动区域内容无法拖动对于 ios4 和 android2.2 以下不支持 position:fixed 的问题，有2种布局方法可以替代。布局一：定义页面整体高度为100%，然后使用 position:absolute 布局可解决 /*  <body> <div class="wrap"> <div class="header">header</div> <div class="main"> 弹性滚动区域 </div> <div class="footer">footer</div> </div> <

CSS基础——display:flex布局常用属性总结

阅读更多关于 CSS基础——display:flex布局常用属性总结

本篇属于css学习笔记，在学习flex布局时有一些经常用到的属性，如果长期不用就会遗忘，在这里做一下记录，方便以后查看，欢迎大家提出意见。 flex is a new value added to the CSS display property. Along with inline-flex it causes the element that it applies to to become a flex container, and the element’s children to each become a flex item. The items then participate in flex layout, and all of the properties defined in the CSS Flexible Box Layout Module may be applied. 基本概念当给一个 element 设置 display:flex 属性时，它本身就变成了一个 flex container ，而它的子元素就成为 flex item ， flex 有很多属性可以用来对 flex item 进行布局，明白了这个基本原理，我们学习 flex 就很简单，只需要查看对应 flex property 的用法就可以。常用flex property flex

stricky footer

阅读更多关于 stricky footer

stricky footer设计是最古老和最常见的效果之一，我们都曾经历过类似的情景：如果页面内容不够长的时候，页脚块粘贴在底部；如果内容足够长时，页脚块会被内容向下推送。最近做demo的时候跟着大佬认识了stricky footer，下来查阅了相关资料，在此记录一下：上图底部的 x 就用到了经典的stricky footer，单页面内容足够时，它会向下推送；当页面内容没有撑满整个屏幕时，它就固定在底部。而不是像下图这样：正是由于上述问题的存在，所以经典的stricky footer出现了。话不多说，下面直接进入主题解决方案 stricky footer主要有三种解决方案，这里我提供两种比较简单的方式，下面我们先构建一点简单的代码 <body> <div class="content"></div> <div class="footer"></div> </body> 1.为内容区域添加最小的高度这个方法主要是用视口vh来计算整体视窗的高度，然后减去底部footer的高度，从而得出内容区域的最小高度 .content{ min-height:calc(100vh - `footer的高度`); box-sizing:border-box; } 这种方法很简单，但是如果页面的footer高度不同，每个页面都要重新计算一次，所以并不推荐 2.使用flex布局 body{

flex布局常见父项属性

阅读更多关于 flex布局常见父项属性

1.常见的父项属性（6个）对父元素设置 1.flex-direction :设置主轴的方向 2.justify-content：设置主轴上的子元素排列方式 3.flex-wrap：设置子元素是否换行 4.align-content：设置侧轴上的子元素的排列方式（多行） 5.align-items：设置侧轴上的子元素排列方式（单行） 6.flex-flow：复合属性，相当于同时设置了flex-ditection和flex-wrap 1.1.flex-direction 设置主轴方向 1.主轴和侧轴，默认水平向右👉 的x轴是主轴‘ 属性值说明 row 默认从左到右 row-reverse 从右到左 column 从上到下 column-reverse 从下到上 1.2.justify-content 注意⚠️：使用前，确定那个是主轴属性值说明 flex-start 从头开始，如果主轴是x轴，则从左到右 flex-end 从尾排列 center 从主轴居中对齐 space-around 平分剩余空间 space-between 先两边贴边，再平分剩余空间 1.3.flex-warp 设置子元素是否换行默认情况下，项目排再一条直线上，flex布局默认不换行属性值说明 nowrap 默认值，不换行 wrap 换行 1.4.align-items 设置侧轴上的子元素排列方式

微信小程序篇】七.UI精讲之布局基础 flex布局和相对绝对定位

阅读更多关于微信小程序篇】七.UI精讲之布局基础 flex布局和相对绝对定位

布局基础 flex布局 1. flex容器和元素设置Flex container 改变主轴和交叉轴的关系 2. flex容器的属性 flex-direction 决定元素的排序方向 flex-wrap 决定元素如何换行（行满的时候） flex-flow 上2者简写 justify-content 元素在主轴上的对齐方式 align-items 元素在交叉轴上的对齐方式 3. flex元素的属性（用于元素里面） flex-grow 当有多余空间时，元素的放大比例 flex-shrink 当空间不足时，元素的缩小比例 flex-basis 元素在主轴上占据的空间 flex 上三者简写 order 定义元素的排序顺序 align-self 定义元素自身的对齐方式，会复写掉justify-content 和 align-items 项目准备创建项目demo6-ui 将index和logs目录删除，新建layout目录在app.json中配置页面入口写layout.wxml < view class = " pageBody " > < view class = " item " > 1 </ view > < view class = " item " > 2 </ view > < view class = " item " > 3 </ view > < view class

Flex布局部分属性困惑解析

阅读更多关于 Flex布局部分属性困惑解析

开始最近研究一个框架，刚好里面也实现了flex布局的算法，虽然平时也用到flex做一些简单的布局，但是深入到算法实现的时候，发现自己对flex某些概念倒是没那么清晰，立马谷歌把几个flex涉及的属性都好好理清一下，权当一个自我梳理。 main-axis和cross-axis main其实跟flex-direction这个属性相当有关系，关系如下图：根据flex-direction的值不同，main-axis方向相应也不同。既然有方向这个概念，这个时候justify-content属性（justify-content主要负责调整main-axis上元素的布局），在取值为flex-start和flex-end时就要注意了。而cross-axis是垂直于main-axis的。当flex-direction取值为row或者row-reverse时cross-axis方向是由下往上。当flex-direction取值为column或者column-reverse时cross-axis方向是由左往右。 align-items和align-content 首先align-item和align-content都是应用在cross-axis上的元素。 flex布局默认情况下元素是不会换行的，这个时候就是align-items起作用的时候，但是当有多行的情况时，align

flex弹性布局

阅读更多关于 flex弹性布局

flex布局的基本简介布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 flex布局示意图 flex 属性应用在flex-container上的属性 display:flex 将盒子模型设置为flex布局，盒子为横向排列（就是沿着主轴的方向排列），display:inline-flex定义为flex盒子的行内元素外面的盒子为flex-container,里面的盒子为flex-item，主轴默认为从左到右，交叉轴为从上到下 flex-direction 决定主轴的方向。是从左到右，从右到左，或是从上到下，从下到上。 flex-direction:row：设置为纵向排列，从左到右的排列方式（默认值） flex-direction:row-reverse：也为横向排列，但是方向为从右到左 flex-direction:column：设置为纵向排列，从上到下 flex-direction

web前端入门到实战：CSS不定宽高的垂直水平居中，9 种方式总汇

阅读更多关于 web前端入门到实战：CSS不定宽高的垂直水平居中，9 种方式总汇

垂直居中，在 CSS 中是一个老生常谈的问题，面试的时候也会时常被提及。所以，今天我们就来聊聊 9 种不同的居中方法。有常见的 flex、transform、absolute 等等。也有 CSS3 的网格布局。还有伪元素的方法，是的，你没有看错，::after 和 ::before 也可以实现居中。 1、flex 大家的第一反应，可能就是 flex 了。因为它的写法够简单直观，兼容性也没什么问题。是手机端居中方式的首选。 <div class="wrapper flex-center"> <p>horizontal and vertical</p> </div> .wrapper { width: 300px; height: 300px; border: 1px solid #ccc; } .flex-center { display: flex; justify-content: center; align-items: center; } 专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享学习方法和需要注意的小细节，互相交流学习，不停更新最新的教程和学习技巧（从零基础开始到WEB前端项目实战教程，学习工具，全栈开发学习路线以及规划）利用到了 2 个关键属性：justify-content 和 align-items，都设置为 center，即可实现居中。

基于原生js和flex布局开发侧边栏

阅读更多关于基于原生js和flex布局开发侧边栏

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 } 13 .flex-left{ 14 width: 200px; 15 text-align: center; 16 background: peru; 17 } 18 .flex-right{ 19 flex-grow: 1; 20 } 21 .flex-left li{ 22 height: 60px; 23 line-height: 60px; 24 font-size: 18px; 25 border-bottom: 1px solid; 26 } 27 .flex-left li:last-child{ 28 border-bottom: none; 29 } 30 .active{ 31 background: #8b8bde; 32 } 33 .hide{ 34 display: none; 35 } html: 1 <div class="flex-box"> 2 <div class="flex-left"> 3 <ul> 4 <li class="li-node

订单页面布局

阅读更多关于订单页面布局

html <view class="consignee"> <view class="consignee-title"> 收件信息 </view> <view class="consignee-address"> <image class="right-arrow" src="/images/order/sub/you.png" /> <image class="bottom-stripe" src="/images/order/sub/xiushi.png" /> <view class="line-one"> <view class="name"> 动感超人 </view> <view class="tel"> 185****9875 </view> </view> <view class="line-two"> 北京朝阳区四环到五环之间878东区12层 </view> </view> </view> <!-- <view class="consignee"> <view class="consignee-title"> 收件信息 </view> <view class="consignee-address"> <image class="right-arrow" src="/images/order/sub/you.png" /> <image class="bottom

订阅 flex布局