Align Flex-Box Items to Baseline of Last Text Line in a Block

Align flex-box items to baseline of last text line in a block

You can wrap the contents of the flex items inside inline-block wrappers:

.flex {  display: flex;  align-items: baseline;}.inline-block {  display: inline-block;}
.item { border: 1px solid red; }.item:first-child { font-size: 200%; }.flex::after { content: ''; position: absolute; left: 0; right: 0; border-top: 1px solid blue; }

<div class="flex">  <div class="item">    <div class="inline-block">Lorem<br />Ipsum<br />Dolor</div>  </div>  <div class="item">    <div class="inline-block">Foo bar</div>  </div></div>

flexbox align item to specified baseline?

You can:

Wrap the contents of the flex items inside inline-blocks
That's because the baseline of an inline-block is in a very interesting position:

The baseline of an 'inline-block' is the baseline of its last line box
in the normal flow
```
<div class="flex-item">
  <div class="inner-wrapper">
    
  </div>
</div>
```
```
.inner-wrapper {
  display: inline-block;
}
```
Float the contents after the desired baseline
This way they will be ignored when calculating the baseline, because floats are out-of-flow. This has some sideway effects, which are mitigated because the inline-block wrappers establish a block formatting context.
If you have multiple of them, you can clear them or use width: 100% to prevent them from stacking horizontally.
```
.flex-body-more {
  float: left; /* Take out-of-flow */
  clear: left; /* Do not stack horizontally */
  width: 100%; /* Do not shrink-to-fit */
}
```

.flex-container {  display: -webkit-flex;  display: flex;  -webkit-align-items: baseline;  align-items: baseline;  width: 400px;  height: 350px;  background-color: lightgrey;  flex-wrap: wrap;}.inner-wrapper {  display: inline-block;  text-align: center;  width: 100px;  margin: 10px;  background-color: cornflowerblue;}.flex-body {  border-bottom: 1px solid #fff;}.flex-body-more {  float: left;  clear: left;  width: 100%;}.flex-img {  justify-content: center;  align-items: center;}

<div class="flex-container">  <div class="flex-item">    <div class="inner-wrapper">      <div class="flex-title">flex title1</div>      <div class="flex-img">        <img src='http://dummyimage.com/90x40/000/ffffff&text=hi'>      </div>      <div class="flex-body">center here</div>      <div class="flex-body-more">more text</div>    </div>  </div>  <div class="flex-item">    <div class="inner-wrapper">      <div class="flex-title">flex title1 longer title</div>      <div class="flex-img">        <img src='http://dummyimage.com/40x40/000/ffffff&text=hi'>      </div>      <div class="flex-body">center here</div>      <div class="flex-body-more">more text</div>    </div>  </div>  <div class="flex-item">    <div class="inner-wrapper">      <div class="flex-title">flex title1</div>      <div class="flex-img">        <img src='http://dummyimage.com/40x90/000/ffffff&text=hi'>      </div>      <div class="flex-body">center here</div>      <div class="flex-body-more">more text more text more text</div>    </div>  </div>  <div class="flex-item">    <div class="inner-wrapper">      <div class="flex-title">flex title1</div>      <div class="flex-img">        <img src='http://dummyimage.com/90x40/000/ffffff&text=hi'>      </div>      <div class="flex-body">center here</div>      <div class="flex-body-more">more text</div>    </div>  </div>  <div class="flex-item">    <div class="inner-wrapper">      <div class="flex-title">flex title1</div>      <div class="flex-img">        <img src='http://dummyimage.com/40x50/000/ffffff&text=hi'>      </div>      <div class="flex-body">center here</div>      <div class="flex-body-more">more text</div>    </div>  </div></div>

Align an element to bottom with flexbox

You can use auto margins

Prior to alignment via justify-content and align-self,
any positive free space is distributed to auto margins in that
dimension.

So you can use one of these (or both):

p { margin-bottom: auto; } /* Push following elements to the bottom */
a { margin-top: auto; } /* Push it and following elements to the bottom */

.content {  height: 200px;  border: 1px solid;  display: flex;  flex-direction: column;}h1, h2 {  margin: 0;}a {  margin-top: auto;}

<div class="content">  <h1>heading 1</h1>  <h2>heading 2</h2>  <p>Some text more or less</p>  <a href="/" class="button">Click me</a></div>

Text items do not align with flex-end

You are looking for flexbox's align-items: baseline

.container {    display: flex;    flex-direction: row;        align-items: baseline;          border:1px solid red;}
.item1 {font-size: 80px;}.item2 {font-size: 14px;}.item3 {font-size: 45px;}
.container> div {border:1px solid green; }

<div class="container">    <div class="item1">Item 1</div>    <div class="item2">Item 2</div>    <div class="item3">Item 3</div></div>

css flex box align text center with buttons below it

@Katie Melosto. I think that the most important thing to deal with flex box is to know where to apply flex to align items, i.e parent element or child element itself.
You can check this url for detailed information of flex css.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

I have changed some part of your code.
Check this url for my chage.

"https://codepen.io/devbluesky111/pen/oNZxBYW"

body {
  display: flex;
  justify-content: center;
} 
.calc {
   display: inline-block;
   /* align-items: center; */
   padding-top: 200px;
   padding-left: 20px;
   display: flex-column;
}
.search_btn {
  align-items: center;
  width: 150px;
  margin: 0 auto;
  /* display: flex; */
  display: block;
}

.search_txt {
  width: 300px;
  margin: 0 auto;
  display: block;
  border-radius: 25px;
  margin-bottom: 10px;
}
.buttons {
  display: flex;
/*   flex-direction: column; */
}

<form class="calc" action="https://calculator.com">
  <input class="search_txt" type="text" name="q">
  <div class="buttons">
    <input class="search_btn" type="submit" value="value">
    <input class="search_btn" type="submit" value="area">
  </div>
</form>

Vertically align text of same-height blocks along a shared baseline (supporting mixed font size)

I would keep the baseline alignment and consider a pseudo elemen trick to increase the hoverable area:

body {
  font-size: 24px; /* Big value to ease highlighting of mis-alignemnt */
}

.some-existing-container {
  height: 4em;
  display: flex;
  align-items: center; 
  border: 1px solid blue; 
}

.menu {
  display: flex;
  align-items: baseline;
  border: 1px solid green; 
  overflow:hidden;
}

.menu-item {
  border: 1px dotted brown; 
  position:relative;
  z-index:0;
}
.menu-item::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:-200px;
  bottom:-200px;
  left:0;
  right:0;
}

.menu-item:hover,
.menu-item:hover::before{
  background-color: grey;
}

.menu-item-label {
  border: 1px dotted pink; 
}

.other {
  margin-left: auto; 
  border: 1px solid purple; 
}

.bigger {
  font-size: 4rem;
}

<div class="main">
  <div class="some-existing-container">
    <div class="menu">
      <div class="menu-item">
        <div class="menu-item-label">
          Home
        </div>
      </div>
      <div class="bigger menu-item">
        <div class="menu-item-label">
          Item1
        </div>
      </div>
      <div class="menu-item">
        <div class="menu-item-label">
          Item2
        </div>
      </div>
      <div class="menu-item">
        <div class="menu-item-label">
          Item3
        </div>
      </div>
    </div>
    <div class="other">
      Other
    </div>
  </div>
</div>

Align Flex-Box Items to Baseline of Last Text Line in a Block