html - Vertically center and left-align a column of flex items -

-

requirements

  1. flexbox
  2. vertically middle
  3. horizontally left
  4. vertically stacked child elements
  5. number of child elements can 1 or multiple
  6. use old syntax android 4.2 understands

sounds difficult describe. pink box in demo want. green box good, don't know how multiple child elements.

i think solution may combination of following, cannot make it.

align-items: center; flex-direction: column; 

body {    margin: 1em .5em;  }  article {    display: flex;    align-items: center;    flex-wrap: wrap;  }    section {    height: 18em;    background: #ccc;    margin: 0 .5em;    position: relative;    display: flex;    align-items: center;  }  section:after {    font-size: smaller;    color: blue;    position: absolute;    bottom: 0;  }  section.big {    width: 20%;    height: 5em;  }  section.small {    width: 10%;    flex: 1;  }  section div {    outline: 1px dotted green;  }  section.want {    background-color: pink;  }  section.want:after {    content: "1) want this: vertically middle, horizontally left, while section contain 1 or several child elements";  }  section.only1 {    background-color: lightgreen;  }  section.only1:after {    content: "2) except 1 point:the number of child element must one.";  }  section.row:after {    content: "3) default flex-diraction row";  }  section.col {    flex-direction: column;  }  section.col:after {    content: "4) can vertically stack multiple stacks, no longer horizontally left-align";  }  section.col.justify {    justify-content: center;    align-items: flex-start;    background-color: lightblue;  }  section.col.justify:after {    content: "6) good!  solved.";  }  section.colmar {    flex-direction: column;  }  section.colmar:after {    content: "5) can vertically stack multiple stacks, , left-align divs, divs not vertically center";  }  section.colmar div {    margin-right: auto;  }
<article>    <section class="small want">      line1      <br/>line2    </section>    <section class="small only1">      <div>only 1 div</div>    </section>    <section class="small row">      <div>div1</div>      <div>div2</div>    </section>    <section class="small col">      <div>div1</div>      <div>div2</div>    </section>    <section class="small colmar">      <div>div1</div>      <div>div2</div>    </section>    <section class="small col justify">      <div>div1</div>      <div>div2</div>    </section>  </article>

codepen demo

justify-content aligns flex items along main axis.

align-items aligns flex items along cross axis, perpendicular main axis.

depending on flex-direction, main axis may horizontal or vertical.

since flex-direction:column means main axis vertical, need use justify-content not align-items center flex items.

here's example:

#container {    display: flex;    flex-direction: column;    justify-content: center;    height: 200px;    background-color: lightpink;  }
<div id="container">    <div class="box">div 1</div>    <div class="box">div 2</div>    <div class="box">div 3</div>    <div class="box">div 4</div>    <div class="box">div 5</div>  </div>

learn more flex alignment along main axis here:

learn more flex alignment along cross axis here:


Comments

Post a Comment

Popular posts from this blog

javascript - Chart.js (Radar Chart) different scaleLineColor for each scaleLine -

-
Image
i try , create radar chart using chart.js has various colours each scaleline, or coloured between scalelines. wondering if possible? from: to: i have working graph, though there doesn't seem method change individual scale lines. kind regards leigh you can extend radar chart type this, so chart.types.radar.extend({ name: "radaralt", initialize: function (data) { chart.types.radar.prototype.initialize.apply(this, arguments); var originalscaledraw = this.scale.draw; var ctx = this.chart.ctx; this.scale.draw = function () { var linewidth = this.linewidth; // bypasses line drawing in originalscaledraw this.linewidth = linewidth; originalscaledraw.apply(this, arguments); ctx.linewidth = this.linewidth; var scale = this; // draw chart.helpers.each(scale.ylabels, function (label, index) { // color of ...
Read more

apache - Error with PHP mail(): Multiple or malformed newlines found in additional_header -

-
suddenly have started receiving above error without changes having been made script. host 1and1 (i know...) the script still works fine on different server, , suspicion there must have been server config change has lead this, although hosts plead ignorance. there's no information on above error @ in google can find - have ideas? server running apache if helps. had similar problem. came out of blue. no php code changed. what changed: php upgraded 5.5.25-1 5.5.26. a security risk in php mail() function has been fixed , newlines in additional_headers allowed no more. because newlines mean: starts email message (and surely don't want inject newlines through headers followed evil message). what have worked fine, e.g. having newlines after headers or passing whole message additional_headers , function no more. solution : sanitize headers. no multiple newlines in additional_headers argument. these count "multiple or malformed newlines":...
Read more

android - Go back to previous fragment -

-
btw second fragment. appear once press button in first fragment. in fragment, if press button on phone, go previous fragment. need guys. in advance. public class listalldoctorfragment extends fragment { button close; @nullable @override public view oncreateview(layoutinflater inflater, viewgroup container, bundle savedinstancestate) { view view = inflater.inflate(r.layout.listalldoctor, container,false); close = (button) view.findviewbyid(r.id.button); close.setonclicklistener(new view.onclicklistener() { @override public void onclick(view view) { android.app.fragmentmanager fm = getfragmentmanager(); fragmenttransaction ft = fm.begintransaction(); shit f2 = new shit(); ft.add(r.id.content_frame, f2); ft.addtobackstack(null); ft.commit(); } }); return view; } } assuming want g...
Read more