flex表单布局

选中文字可对指定文章内容进行评论啦,→和←可快速切换按钮,绿色背景文字可以点击查看评论额。

flex表单布局

我们知道,在表单布局的时候,有的时候想对齐的话,我们需要调整元素的外边距margin,内边距padding

但是一旦浏览器的视口发生变化或者设备发生变化,往往会产生我们意想不到的效果。要么是错位,要么是不能适应新设备。今天我们就看看用flex怎么来布局表单。

我们先看第一个例子,传统的布局

<!doctype html>
<head>
    <title>Example</title>
</head>
<body>
<form>
  <ul class="wrapper">
    <li class="form-row">
      <label for="name">Name</label>
      <input type="text" id="name">
    </li>
    <li class="form-row">
      <label for="townborn">Town you were born in</label>
      <input type="text" id="townborn">
    </li>
    <li class="form-row">
      <label for="email">Email Address</label>
      <input type="email" id="email">
    </li>
    <li class="form-row">
      <button type="submit">Submit</button>
    </li>
  </ul>
</form>
<body>
</html>

css代码

.wrapper {
    background-color: whitesmoke;
    list-style-type: none;
    padding: 0;
    border-radius: 3px;
}
.form-row {
    padding: .5em;
}
.form-row > label {
    padding: .5em 1em .5em 0;
}
.form-row > input,
.form-row > button {
    padding: .5em;
}
.form-row > button {
   background: gray;
   color: white;
   border: 0;
}

传统布局的代码是这样的效果

如果大家对这个布局比较满意的话,就不用看下面的代码了,如果不满意的话,可以继续读下去

我们换另一套css的样式:

.wrapper {
    background-color: whitesmoke;
    list-style-type: none;
    padding: 0;
    border-radius: 3px;
  }
  .form-row {
    display: flex;
    justify-content: flex-end;
    padding: .5em;
  }
  .form-row > label {
    padding: .5em 1em .5em 0;
  }
  .form-row > input {
    flex: 1;
  }
  .form-row > input,
  .form-row > button {
    padding: .5em;
  }
  .form-row > button {
   background: gray;
   color: white;
   border: 0;
  }

用了这套样式后,效果是这样的

解释一下,我们对form的每一行采用了flex布局,也就是.form-row { display:flex},然后对每行内的子元素lable和input采用了label自适应,然后input占据剩余的所有空间。这看着比第一个好点,但是还是美哦与对齐呀。因此,我应该想办法想input对齐。这里我采用的一种方案是,input占据整个宽度的⅔,剩下的占据⅓.

好了,我贴出关键的代码:

.form-row > label {
    padding: .5em 1em .5em 0;
    flex: 1;
}
.form-row > input {
    flex: 2;
}

现在看着舒服点了吧。

大家注意了,其实这个比例也是可以根据不同的屏幕宽度进行改变的,因此屏幕比较大的时候,可能1:2的比例就不那么适应了,因此可以结合媒体查询来设置,代码如下:

@media screen and (min-width: 768px) {
   	.form-row > input {
    	flex: 3;  
   }
}
@media screen and (min-width: 992px) {
   	.form-row > input {
    	flex: 4;  
   }
}
@media screen and (min-width: 1200px) {
   	.form-row > input {
    	flex: 5;  
   }
}

再有就是可能想让label的文字也对齐,其实这个只要设置一个text-align属性就可以啦。

 

版权声明:著作权归作者所有。

相关推荐

[译]iOS11安全区布局指南(Safe Area Layout Guide)

Apple在iOS7为UIViewController新增了topLayoutGuide和bottomLayoutGuide属性。它们可以让你创建约束以避免内容被UIKit的横条,如状态、导航或标签栏覆盖。在iOS 11这些布局指南被废弃,并被单一的安全区布局指南代替。顶部和底部布局指南——概述这是使用顶部和底部布局指南在导航控制器和标签栏插入视图控制器的示例:绿色的内容视图相对底部锚点

HTML 5关闭表单的自动填充(Autocompletion)

在HTML 5可以使用autocomplete属性关闭表单的自动填充。autocomplete="off" autocomplete可以在两个地方使用:form标签和input等输入标签form标签在form标签添加autocomplete="off"是关闭整个表单的自动填充。<form method="post"

CSS3:Flex布局

Flex是一种弹性布局,要分为两部分理解Flex:作用于容器(flex-container)的属性作用于容器里项目(flex-item)的属性Flex布局不同于块元素的垂直排列和行内元素的水平排列。Flex布局可以根据需要设定容器内的项目元素是水平还是垂直分布。设定了flex的方向后,我们就可以确定了Flex分布的主轴(main axis)以及交叉轴(cross axis)。主

解决IE11 Flex布局文本不换行的问题

在页面上使用了flex来布局,代码如下:CSS:.container{     display: flex;     flex-direction: column;     border: 1px solid red;     align-items: center;   }   .item {     border: 

Python单个表达式合并字典的方法

有时需要把两个字典合并为一个新的字典。这里记录下以下三种使用单个表达式的来做合并的方式。方式一:自定义合并函数def merge_dictionaries(first_dict, second_dict): merged = first_dict.copy() merged.update(second_dict) return mergedd1 = { "A": "张三", "B":

用来显示页面布局,margin,padding的CSS hack

在做前端开发过程中,有时要查看整体页面的布局,padding,margin。设置是在不同浏览器的实现情况。以下Javascript脚本可以添加到浏览器的书签中,用来打开显示页面的布局,margin以及padding。CSS hack脚本javascript: (function() { var elements = document.body.getElementsByTagName('*');

CSS三栏布局——浮动

不使用定位,只使用浮动实现左右固定,中间宽度自适应布局实现关键:自适应部分一定要放在第一个位置,使用浮动,且宽度设置为100%,如果不设置为100%,浮动元素内容不够撑开整个宽度。左右固定部位,使用margin-left :负数,使其左右靠齐。中间自适应部分嵌套一个div,设置margin-left 和 margin-right 使其空出左右固定的宽度。代码如下:<!DOCTYPE HTML

CSS三栏布局——定位

这里首先让中间栏绝对定位,两边栏相对定位;这里需要注意的是,如果中间使用绝对定位,不设置宽度的话将会撑不开容器;因此,中间使用了相对定位后,同时设置margin-left和margin-right给左右两栏一定空间,然后左右两栏不管是相对定位还是绝对定位都可以,这里我们使用绝对定位:<!DOCTYPE HTML> <html lang="en-US"> <head&g