How to rotate first element wit flexbox and make it full-height?

Question

I try to implement this graphic with HTML, CSS using flexbox:

Now, I have trouble with the left part. I don't know how to implement this -90 degrees rotated element. The right part (all elements that are horizontally aligned) is not the problem.

Here is what I have so far:

.container {
  max-width: 1176px;
  width: 100%!important;
  margin: 0 auto!important;
  float: none!important;
  z-index: 1;
}

.pt {
  padding-top: 3.5rem;
  /* 56px */
}

.pb {
  padding-bottom: 3rem;
  /* 48px */
}

.ptms {
  padding-top: 1.5rem;
  /* 24px */
}

.full-width {
  width: 100%;
  padding: 0 1.5rem;
}

.three-col {
  width: 33.3333334%;
  padding: 0 1.5rem;
}

.platform-container,
.platform-card-container {
  display: flex;
}

.platform-card-container .three-col,
.platform-card-container .full-width {
  padding: 0 .75rem;
}

.platform-card-container a {
  text-decoration: none;
}

.platform-card,
.platform-card-first {
  border-radius: .5rem;
  box-shadow: 0 .25rem .75rem 0 rgba(27, 27, 27, 0.24);
  display: flex;
  height: 100%;
}

.platform-card {
  align-items: center;
}

.platform-card-first {
}

.platform-card-icon {
  padding: .75rem;
  border-radius: 50%;
  background-color: #f5f5f5;
  width: 3.5rem;
  height: 3.5rem;
  min-width: 3.5rem;
}

.platform-card-text {
  margin-left: 1rem;
}

.platform-card-text-title {
  margin-bottom: .5rem;
  color: #1b1b1b;
}

.platform-card-text-desc {
  color: #007095;
}


  
    
      
        
          
            
              
            
            
              Open Architecture
              Extend systems as required
            
          
        
      
    
  
  
    
      
        
          
            
              
            
            
              User Interface
              Modern front-end technologies
            
          
        
      

      
        
          
            
              
            
            
              Intelligent Mobility
              Mobile and offline access
            
          
        
      

      
        
          
            
              
            
            
              Social Collaboration
              Efficient teamwork
            
          
        
      
    

    
      
        
          
            
              
            
            
              Low-Code Suppport
              Processes without programming
            
          
        
      
    

    
      
        
          
            
              
            
            
              Business Rule Engine
              Intelligent decision making
            
          
        
      

      
        
          
            
              
            
            
              Integration
              Standard connectors and more
            
          
        
      

      
        
          
            
              
            
            
              Adaptive Case Management
              Making processes flexible
            
          
        
      
    

    
      
        
          
            
              
            
            
              Process Engine
              Powerful process automation
            
          
        
      
    

    
      
        
          
            
              
            
            
              Modern Runtime Platform
              Environment with container support

Does anyone have a hint on how I should proceed?

roberto tom&#225;s · Accepted Answer

I believe these styles are what you want:

  text-align: right;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-orientation: mixed;

https://jsfiddle.net/aycq2v8u/

edit: I noticed that the height still wasn't right. (BTW, display:grid makes this sort of thing easier). here's a revision with that fixed as well. although, this does require either ridiculous looking selectors or changes to the html, which I have done here: https://jsfiddle.net/rxgbo4a9/

changes required: the card container of the first card (that needs to be full height) needs to be different. since it is on the side and generally different content, I marked it as an aside:

then, with that, using minimal changes to your css we get the desired result:

aside.platform-card-container {
  height:100%
}
aside.platform-card-container a {
  display: flex;
  height: 100%
}

note that specifying height instead of using flexbox is not ideal. however, since all your code makes the same mistake, I think you minimize technical debt to keep all the problems of the same type .. ie, keep using height until you are ready to remove it generally.

How to rotate first element wit flexbox and make it full-height?

Answers (1)

Related Questions