快速应用 Flex 布局

UI/IxD 设计师

因为要写小程序。所以，就学会了 Flex 布局了。

我先看了一篇入门文章觉得是为甚好，比另一个技术网红写的那篇筛子好多了。最少这篇文章我是一次性就看会了。技术网红那篇我看了七八次都没看懂。
深入解析 CSS Flexbox - OXXO.STUDIO

CSS 样式表

既然会了，那么，我就把一些 CSS 进行了简单封装了。
于是乎，就有了下面的 CSS 样式了。

// flex

.flex {
  display: flex;
}

.flex-column {
  flex-direction: column
}

.flex-row {
  flex-direction: row
}

.aitems-flex-start {
  align-items: flex-start;
}

.aitems-center {
  align-items: center;
}

.aitems-flex-end {
  align-items: flex-end;
}

.aself-center {
  align-self: center;
}

.aself-center {
  align-self: flex-end;
}

.acontent-center {
  align-content: center;
}

.acontent-flex-end {
  align-content: flex-end;
}

.jcontent-center {
  justify-content: center;
}

.jcontent-flex-end {
  justify-content: flex-end;
}

.jcontent-flex-start {
  justify-content: flex-start;
}

Web 应用

既然如此，有了 css 样式表，那么应用也特别简单了。

<view class="top flex flex-row aitems-center overflow-visible" >
    <view class="avatar overflow-visible" >
            <image src="{{userInfo.avatarUrl}}" class="avatar-image" />
    </view>
    <view class="text">
            <view class="area" >
                    <view class="title b" >庫倪</view>
                    <view class="p color-light" >全棧設計師</view>
                    <view class="p color-light" >現在全職打理樣本工作室</view>
            </view>
    </view>
</view>

结语

封装好的 CSS 样式实在太好用了。最大问题是我的 Sublime Text 不知道为什么没有相关 Flex 的代码提示。
不过，我在 Float 漂浮年代也是喜欢这样封装来写。

编辑于 2017-01-14 05:18

CSS 布局

微信小程序

文章被以下专栏收录

樣本工作室