flexbox выровнять текст по ссылкам на нижнюю часть экрана

Это может быть слишком рано в понедельник утром для этого.flexbox выровнять текст по ссылкам на нижнюю часть экрана

Я использовал flexbox для выравнивания общей страницы, но не отдельных ссылок, и вы хотите выровнять текст ссылок в нижней части. Я ожидал вертикального выравнивания: дно, чтобы работать, но это не так.

body,* { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: sans-serif; 
 
    font-weight: normal; 
 
    text-transform: uppercase; 
 
} 
 
nav li:nth-child(1) {background: #eee;} 
 
nav li:nth-child(2) {background: #ddd;} 
 
nav li:nth-child(3) {background: #ccc;} 
 
nav li:nth-child(4) {background: #bbb;} 
 
/* Styles */ 
 
html, 
 
body, 
 
nav { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
nav ul { 
 
    width: 100%; 
 
    height: 100%; 
 
    list-style: none; 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: nowrap; 
 
    align-items: stretch; 
 
} 
 
nav li { 
 
    flex-grow: 1; 
 
} 
 
nav a { 
 
    display: block; 
 
    height: 100%; 
 
    text-align: center; 
 
    color: #fff; 
 
    text-decoration: none; 
 
    vertical-align: bottom 
 
} 
 

 
nav + div { 
 
    position: fixed; 
 
    bottom: 100px; 
 
    background: #fff; 
 
    width: 100%; 
 
    text-align: center; 
 
}

<nav> 
 
    <ul> 
 
    <li><a href="">Link one</a></li> 
 
    <li><a href="">Link two</a></li> 
 
    <li><a href="">Link three</a></li> 
 
    <li><a href="">Link four</a></li> 
 
    </ul> 
 
</nav> 
 
<div> 
 
    <h1>Heading</h1> 
 
    <h2>Sub heading</h2> 
 
</div>

источник

2016-11-14 R Reveley

Вы можете использовать display: flex; на nav li a ссылки, так же как:

nav li a { 
    display: flex; 
    justify-content: center; 
    align-items: flex-end; 
}

Посмотрите ниже фрагмент кода:

body, 
 
\t \t * {margin: 0; padding: 0; font-family: sans-serif; font-weight: normal; text-transform: uppercase;} 
 
\t \t nav li:nth-child(1) {background: #eee;} 
 
\t \t nav li:nth-child(2) {background: #ddd;} 
 
\t \t nav li:nth-child(3) {background: #ccc;} 
 
\t \t nav li:nth-child(4) {background: #bbb;} 
 
/* Styles */ 
 
\t \t html, 
 
\t \t body, 
 
\t \t nav {width: 100%; height: 100%;} 
 
\t \t nav ul {width: 100%; height: 100%; list-style: none; 
 
\t \t \t display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch;} 
 
\t \t nav li {flex-grow: 1;} 
 
\t \t nav a {display: block; height: 100%; text-align: center; color: #fff; text-decoration: none; vertical-align: bottom} 
 

 
\t \t nav + div {position: fixed; bottom: 100px; background: #fff; width: 100%; text-align: center;} 
 

 

 
nav li a { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: flex-end; 
 
}

<nav> 
 
\t \t <ul> 
 
\t \t \t <li><a href="">Link one</a></li> 
 
\t \t \t <li><a href="">Link two</a></li> 
 
\t \t \t <li><a href="">Link three</a></li> 
 
\t \t \t <li><a href="">Link four</a></li> 
 
\t \t </ul> 
 
\t </nav> 
 
\t <div> 
 
\t \t <h1>Heading</h1> 
 
\t \t <h2>Sub heading</h2> 
 
\t </div>

Надеюсь, это поможет!

источник

2016-11-14 10:12:18

Я надеялся избежать usng сгибать другой уровень вниз, если это возможно. –

Вы можете просто заменить CSS для нав в

nav a { 
    height: 100%; 
    text-align: center; 
    color: #fff; 
    text-decoration: none; 
    display: -webkit-flex; 
    /* Safari */ 
    -webkit-align-items: center; 
    /* Safari 7.0+ */ 
    display: flex; 
    align-items: center; 
}

источник

2016-11-14 10:17:16

\t \t body, 
 
\t \t * {margin: 0; padding: 0; font-family: sans-serif; 
 
     font-weight:normal; text-transform: uppercase;} 
 
\t \t nav li:nth-child(1) {background: #eee;} 
 
\t \t nav li:nth-child(2) {background: #ddd;} 
 
\t \t nav li:nth-child(3) {background: #ccc;} 
 
\t \t nav li:nth-child(4) {background: #bbb;} 
 
/* Styles */ 
 
\t \t html, 
 
\t \t body, 
 
\t \t nav {width: 100%; height: 100%;} 
 
\t \t nav ul {width: 100%; height: 100%; list-style: none; 
 
\t \t display: flex; flex-direction: row; flex-wrap: nowrap; 
 
     align- items: stretch;} 
 
\t \t nav li { 
 
     flex-grow: 1; 
 
     display: flex; 
 
     } 
 
\t \t nav a { 
 
     color: #ffffff; 
 
     display: block; 
 
     align-self: end; 
 
     text-align: center; 
 
     text-decoration: none; 
 
     vertical-align: bottom; 
 
     empty-cells: 0; 
 
     width: 100%; 
 
     } 
 

 
\t \t nav + div {position: fixed; bottom: 100px; background: #fff; 
 
     width: 100%; text-align: center;}

\t <nav> 
 
\t \t <ul> 
 
\t \t \t <li><a href="">Link one</a></li> 
 
\t \t \t <li><a href="">Link two</a></li> 
 
\t \t \t <li><a href="">Link three</a></li> 
 
\t \t \t <li><a href="">Link four</a></li> 
 
\t \t </ul> 
 
\t </nav> 
 
\t <div> 
 
\t \t <h1>Heading</h1> 
 
\t \t <h2>Sub heading</h2> 
 
\t </div>

источник

2016-11-14 10:19:54

flexbox выровнять текст по ссылкам на нижнюю часть экрана

ответ

Смежные вопросы