flex布局

微信小程序 View：flex 布局

阅读更多关于微信小程序 View：flex 布局

微信小程序 View 支持两种布局方式：Block 和 Flex 所有 View 默认都是 block 要使用 flex 布局的话需要显式的声明： display:flex; 下面就来介绍下微信小程序的 Flex 布局先做一个简单的 demo <view class="main"> <view class="item item1">1</view> <view class="item item2">2</view> <view class="item item3">3</view> </view> 加上背景色能看的更清楚些 .main { width: 100%; background-color: antiquewhite; } .item { height: 100rpx; width: 100rpx; } .item1 { background-color: red; } .item2 { background-color: dodgerblue; } .item3 { background-color: greenyellow; } 然后大概是这个样子的：然后我们先都加上 display: flex 好使用 flex 布局，主意，貌似 view 不会自动继承，需要在每个想使用的 view 里都加上。首先是横向布局和竖向布局，要设置属性 flex-direction

微信小程序：flex 布局

阅读更多关于微信小程序：flex 布局

https://www.jianshu.com/p/2839fb8484ce 微信小程序 View 支持两种布局方式：Block 和 Flex，所有 View 默认都是 block浮动布局，要使用 flex 布局的话需要显式的声明： display:flex; 概述 1.Flex容器属性 flex-direction 决定元素的排列方向 flex-wrap 决定元素如何换行 flex-flow flex-direction和flex-wrap的简写 justify-content 元素在主轴上的对齐方式 align-items 元素在交叉轴的对齐方式 2.Flex容器内元素属性 flex-grow 当有多余空间时，元素的放大比例 flex-shrink 当空间不足时，元素的缩小比例 flex-basis 元素在主轴上占据的空间 flex 是grow、shrink 、basis的简写 order 定义元素的排列顺序 align-self 定义元素自身的对齐方式写一个简单Demo wxml： <view class=“main”> <view class="item item1">1</view> <view class="item item2">2</view> <view class="item item3">3</view> </view> wxss: .main {

flex 布局学习

阅读更多关于 flex 布局学习

flex 布局学习寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不由得感觉眼前一亮，顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐，然而很快就失望的发现 CSS 中并不存在 float: center 的写法，那么 text-align: center 、 verticle-align: center 是否可行呢？答案也是否定的。这两个属性只能用于行内元素，对于块级元素的布局是无效的。在网页布局没有进入 CSS 的时代，排版几乎是通过 table 元素实现的，在 table 的单元格里可以方便的使用 align 、 valign 来实现水平和垂直方向的对齐，随着 Web 语义化的流行，这些写法逐渐淡出了视野，CSS 标准为我们提供了 3 种布局方式：标准文档流、浮动布局和定位布局。这几种方式的搭配使用可以轻松搞定 PC 端页面的常见需求，比如实现水平居中可以使用 margin: 0 auto ，实现水平垂直同时居中可以如下设置： .dad { position: relative; }复制代码 .son { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left:

说说css3布局

阅读更多关于说说css3布局

使用float属性或position属性布局的缺点 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> div { width: 20em; float: left; } #div1 { margin-right: 2em; } #div3 { width: 100%; background-color: yellow; height: 200px; } </style> </head> <body> <div id="div1"> <p> 示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。 </p> </div> <div id="div2"> <p> 示例文字。相对来说比较长的示例文字。示例文字

flex 布局下，css 设置文本不换行时，省略号不显示的解决办法

阅读更多关于 flex 布局下，css 设置文本不换行时，省略号不显示的解决办法

大致是有一个 main 容器是 flex 布局，左边一个 logo 固定宽高，右边 content 动态宽度。 <div class="main"> <img alt="" class="logo" src="pic.jpg"> <div class="content"> <h4 class="name">a name</h4> <p class="info">a info</p> <p class="notice">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt

阅读更多关于 flex布局

网页布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一种新的方案 - Flex布局，可以简便、完整、响应式地实现各种页面布局。已经得到了所有浏览器的支持，最近刚刚发布的小程序则广泛使用了flx布局， Flex布局将成为未来布局的首选方案。本视频教程讲详细讲解flex布局的方方面面。 Flex布局是什么？ Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。 .box{display: flex;} 行内元素也可以使用Flex布局。 .box{display: inline-flex;} Webkit内核的浏览器，必须加上-webkit前缀。 .box{ display:-webkit-flex; display:flex;} 注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。基本概念采用Flex布局的元素，称为Flex容器（flex container）。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴

flex学习笔记

阅读更多关于 flex学习笔记

在网上学习了flex布局，决定自己总结一下用法。容器属性：想要实现flex布局，前提是设置容器的display为flex，这样就可以使用flex的属性进行布局了。flex布局基于主轴和交叉轴，元素根据主轴和交叉轴进行相应的排列。属性1： flex-direction ：设置主轴的方向，默认值是row，即根据水平轴从左至右排列元素；可选值：colum、row-reverse、column-reverse分别对应↓、←、↑。属性2： flex-wrap ：设置排列的元素超出容器宽度时是否换行，默认值是nowrap（不换行）；可选值：wrap（换行），wrap-revers（反向换行）。属性3： justify-content ：设置元素在主轴上的排列方式，默认值是flex-start（从主轴的起始点开始排列）；可选值：flex-end：从主轴的末尾开始排列；center：根据主轴居中排列；space-between：元素平均分布在主轴上，头尾不留间隙；space-around：元素位于各行之前、之间、之后都留有空白的容器内，头尾有二分之一间隙；initial：该关键字用于设置 CSS 属性为它的默认值，css里该关键字通用；inherit：根据父元素继承该属性，css里该关键字通用；space-evenly：平均分配元素，元素间的间隙相同（在移动端ios中正常安卓手机不兼容）

flex布局-属性

阅读更多关于 flex布局-属性

/* flex布局：弹性盒布局，flex容器，子元素flex项目默认两根轴：水平轴和垂直交叉轴，项目默认沿主轴排列注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。 */ /* 一、容器的属性 flex-direction flex-wrap flex-flow justify-content align-items align-content */ /* 1、flex-direction : 决定主轴方向（项目的排列方向） row : 默认值，主轴水平，起点左端 row-reverse : 主轴水平，起点右端 column : 主轴垂直，起点上端 column-reverse : 主轴垂直，起点下端 */ /* 2、flex-wrap : 各项目是否有换行 nowrap : 默认值，不换行 wrap : 换行 wrap-reverse : 换行，第一行在下方 */ /* 3、flex-flow : 是flex-direction 和 flex-wrap 的简写默认值 row wrap */ /* 4、justify-content : 定义项目在主轴上的排布方式 flex-start : 左对齐 flex-end : 右对齐 center : 居中 space-betwoon : 两端对齐，项目之间间隔相等 space

弹性盒模型

阅读更多关于弹性盒模型

在使用弹性盒模型的时候父元素必须要加display:box 或 display:inline-box ps：这里遇到了小问题，还没解决。在火狐中，识别不了-moz-box；反而识别了-webkit-box；原因找到后会补上 box-orient 定义盒模型的布局方向（给父元素设置的），值vertical垂直，horizontal水平（默认）。 box-direction 元素排列顺序。感觉浏览器对有些属性的支持真的差距好大啊。值noramal正序，reverse倒序。如下图，上面是firefox 下面是chrome box-ordinal-group 设置元素的具体位置，即混序排列，属性为数字举个栗子 .div1 div:nth-of-type(1){ -moz-box-ordinal-group: 4;-webkit-box-ordinal-group: 4; } .div1 div:nth-of-type(2){ -moz-box-ordinal-group:2; -webkit-box-ordinal-group: 2; } .div1 div:nth-of-type(3){ -moz-box-ordinal-group: 5;-webkit-box-ordinal-group: 5; } .div1 div:nth-of-type(4){ -moz-box

浅谈CSS3中display属性的Flex布局

阅读更多关于浅谈CSS3中display属性的Flex布局

最近在学习微信小程序，在设计首页布局的时候，新认识了一种布局方式display:flex 1 .container { 2 display: flex; 3 flex-direction: column; 4 align-items: center; 5 background-color: #b3d4db; 6 } 编译之后的效果很明显，界面的布局也很合理，看起来很清晰。那么究竟这个属性是干嘛用的呢？　　 Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的 float 、 clear 和 vertical-align 属性将失效。它即可以应用于容器中，也可以应用于行内元素。(以上说明结合微信开发者工具说明)2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。基本概念采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 main

订阅 flex布局