CODEWITHSUNDEEP
htmlcssflexbox
user2896120
user2896120

Reputation: 3282

Controlling link wrapped item in flexbox

I have a container that is set to display: flex inside this container are items that are wrapped with links. I'd like to control the items with their div class names rather than their a attribute. Here's my code:

.container {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  margin-bottom: 2rem;
  justify-content: space-between;
  flex-flow: wrap;
}

.container a {
  background-color: red;
  width: 48%;
  margin-bottom: 2%;
}
<div class="container">
  <a href="google.com"><div class="item">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div></a>
  <a href="google.com"><div class="item">It is a long established fact that a reader will be distracted by the readable content of a page.</div></a>
</div>

This works perfectly, however, I want to replace .container a with the div class name item. The reason for this is when maintaining the code I think it would confuse the person looking over my CSS. How can I make it so I can replace the selector .container a with .item and it still working the same? Note: The entire div block must be a link. Here's the jsFiddle

Upvotes: 0

Views: 2167

Answers (3)

Facundo Corradini
Facundo Corradini

Reputation: 3913

You can add the classes to your A tags. And even drop the divs altogether. 

.container {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  /*width: 100%; by default*/
  margin-bottom: 2rem;
  justify-content: space-between;
  flex-flow: wrap; /* has no effect since you're using % for flex-items width */
}

.item {
  background-color: red;
  width: 48%;
  margin-bottom: 2%;
}
<div class="container">
  <a class="item" href="google.com">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </a>
  <a class="item" href="google.com">It is a long established fact that a reader will be distracted by the readable content of a page.</a>
</div>

Upvotes: 1

Johannes
Johannes

Reputation: 67748

You could apply the class names to the a tags instead of the divs (or to both, if the DIVs need to keep the classes)

Upvotes: 0

seunadex
seunadex

Reputation: 172

Why not try something like this, by moving the a tag inside the div by doing so you can target them using the div class .item

<div class="container">
  <div class="item"><a href="google.com">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </a></div>
  <div class="item"><a href="google.com">It is a long established fact that a reader will be distracted by the readable content of a page.</a></div>
    </div>

Upvotes: 0

Related Questions