Botonera con Flex

by Pasky Org

HTML

<ul>
  <li><span>Agenda de<br>la Ciudad</span></li>
  <li><span>Agenda de<br>la Ciudad</span></li>
  <li><span>Últimas<br>Noticias</span></li>
  <li><span>Organismos y Empresas Municipales</span></li>
  <li><span>Ayuntamiento</span></li>
  <li><span>Sede<br>Electrónica</span></li>
  <li><span>Formación y Orientación al Empleo</span></li>
</ul>

CSS

li {
  /* This is the code responsible for the centering of content */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-flex-line-pack: center;
  -ms-flex-line-pack: center;
  -webkit-align-content: center;
  align-content: center;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  text-align: center;
  width: 40%;
  height: auto;
  font-family: "Segoe UI";
  color: #B3003A;
  font-size: 4.5vw;
  border: 0px solid grey;
  border-radius: 10px;
  box-shadow: 0 0 0.2em grey;
  padding: 15px;
  margin: 10px;
}

li > span::first-line {
  font-weight: bold;
  display: block;
}

ul {
  /* This lines the li's up in a row and will wrap them under each other */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}