flex-examples
image
.box {
display: flex;
align-items: center;
}
image
.box {
display: flex;
justify-content: center;
align-items: center;
}
bootstrap4的inputGroup
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control">
<div class="input-group-append">
<span class="input-group-text">.00</span>
</div>
</div>
/*_variables.scss*/
// $input-border-width = $input-btn-border-width = $border-width = 1px
// input-height-border = $input-border-width * 2
$border-width: 1px !default;
$input-btn-border-width: $border-width !default;
$input-border-width: $input-btn-border-width !default;
$input-height-border: $input-border-width * 2 !default;
//$input-line-height = $input-btn-line-height = $line-height-base = 1.5
$line-height-base: 1.5 !default;
$input-btn-line-height: $line-height-base !default;
$input-line-height: $input-btn-line-height !default;
$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
$input-btn-padding-y: .375rem !default;
$input-btn-padding-x: .75rem !default;
$input-height-inner: ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default;
$input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default;
/*_forms.scss*/
.form-control {
display: block;
width: 100%;
height: $input-height;
padding: $input-padding-y $input-padding-x;
font-size: $font-size-base;
line-height: $input-line-height;
color: $input-color;
background-color: $input-bg;
background-clip: padding-box;
border: $input-border-width solid $input-border-color;
}
/*_input-group.scss*/
.input-group {
position: relative;
display: flex;
flex-wrap: wrap; // For form validation feedback
align-items: stretch;
width: 100%;
> .form-control{
position: relative; // For focus state's z-index
flex: 1 1 auto;
// Add width 1% and flex-basis auto to ensure that button will not wrap out
// the column. Applies to IE Edge+ and Firefox. Chrome does not require this.
width: 1%;
margin-bottom: 0;
}
}
.input-group-prepend,
.input-group-append {
display: flex;
.input-group-text + .input-group-text{
margin-left: -$input-border-width;
}
}
.input-group-prepend { margin-right: -$input-border-width; }
.input-group-append { margin-left: -$input-border-width; }
.input-group-text {
display: flex;
align-items: center;
padding: $input-padding-y $input-padding-x;
margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
font-size: $font-size-base; // Match inputs
font-weight: $font-weight-normal;
line-height: $input-line-height;
color: $input-group-addon-color;
text-align: center;
white-space: nowrap;
background-color: $input-group-addon-bg;
border: $input-border-width solid $input-group-addon-border-color;
@include border-radius($input-border-radius);
// Nuke default margins from checkboxes and radios to vertically center within.
input[type="radio"],
input[type="checkbox"] {
margin-top: 0;
}
}
bootstrap3的inputGroup
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
/*variables.less*/
@padding-base-vertical: 6px;
@padding-base-horizontal: 12px;
@font-size-base: 14px;
@line-height-base: 1.428571429; // 20/14
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
//** Large `.form-control` height
/*input-groups.less*/
.input-group {
position: relative; // For dropdowns
display: table;
border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
.form-control {
// Ensure that the input is always above the *appended* addon button for
// proper border colors.
position: relative;
z-index: 2;
// IE9 fubars the placeholder attribute in text inputs and the arrows on
// select elements in input groups. To fix it, we float the input. Details:
// https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855
float: left;
width: 100%;
margin-bottom: 0;
}
}
.input-group-addon,
.input-group .form-control {
display: table-cell;
&:not(:first-child):not(:last-child) {
border-radius: 0;
}
}
.input-group-addon{
width: 1%;
white-space: nowrap;
vertical-align: middle; // Match the inputs
}
.input-group-addon {
padding: @padding-base-vertical @padding-base-horizontal;
font-size: @font-size-base;
font-weight: normal;
line-height: 1;
color: @input-color;
text-align: center;
background-color: @input-group-addon-bg;
border: 1px solid @input-group-addon-border-color;
border-radius: @input-border-radius;
// Nuke default margins from checkboxes and radios to vertically center within.
input[type="radio"],
input[type="checkbox"] {
margin-top: 0;
}
}
/*forms.less*/
.form-control {
display: block;
width: 100%;
height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
padding: @padding-base-vertical @padding-base-horizontal;
font-size: @font-size-base;
line-height: @line-height-base;
color: @input-color;
background-color: @input-bg;
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
border: 1px solid @input-border;
border-radius: @input-border-radius; // Note: This has no effect on <select>s in some browsers, due to the limited stylability of <select>s in CSS.
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
.transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
}
solved-by-flexbox的input-add-on
<div class="InputAddOn">
<span class="InputAddOn-item">…</span>
<input class="InputAddOn-field">
<button class="InputAddOn-item">…</button>
</div>
.InputAddOn {
display: flex;
margin-bottom: 1.5em;
}
.InputAddOn-field {
flex: 1;
}
.InputAddOn-item {
background-color: rgba(147, 128, 108, 0.1);
color: #666666;
font: inherit;
font-weight: normal;
}
.InputAddOn-field,
.InputAddOn-item {
border: 1px solid rgba(147, 128, 108, 0.25);
padding: 0.5em 0.75em;
}
refer to
- bootstrap3
doc
input-groups.less
variables.less
forms.less - bootstrap4
doc
_input-group.scss
_variables.scss
_forms.scss - Flex 布局教程
语法篇
实例篇 - solved-by-flexbox
demo
input-add-on.css
